flex布局

*{ margin: 0; padding: 0; }

html,body{ height: 100%; position: relative; }

.wrapper{ height: 100px; line-height: 100px; text-align: center; width: 30%; margin: 0 auto; }

.box-flex{ background: #f4f4f4; padding: 10px; border: 1px dashed steelblue; }

.box-flex span{ display: block; border: 1px solid red; }

.box-wp h2{ text-align: left; }

.box-wp h2 span{ font-weight: normal; font-size: 18px; }

.box-flex{ display:-ms-flex; display:-moz-flex; display:-webkit-flex; display:flex; }

.item{ margin-bottom: 10px; }

footer{ position: fixed; right: 10px; bottom: 10px; color: #ddd; text-align: right; }

/* 小屏下变成纵向排列元素 */

@media (max-width: 768px) {

.box-flex{ flex-direction: column; }

}

/* flex两列布局 */

.box-flex1{ }

.box-flex1 .item:nth-child(1){ flex-grow: 2; }

.box-flex1 .item:nth-child(2){ flex-grow: 1; }

/* flex两列布局（一列定宽，另一列随屏幕宽度自适应） */

.box-flex2{ }

.box-flex2 .item{ }

.box-flex2 .item:nth-child(1){ flex: 1 0 100px; } /* 元素不收缩 */

.box-flex2 .item:nth-child(2){ flex-grow: 1; overflow: hidden; } /* 防止元素内容过长超出父元素 */

/* flex三列布局 */

.box-flex3{ }

.box-flex3 .item:nth-child(1){ flex-grow: 2; order: 1; }

.box-flex3 .item:nth-child(2){ flex-grow: 1; order: 0; }

.box-flex3 .item:nth-child(3){ flex-grow: 1; order: 2; }

/* flex n列等比布局 */

.box-flex4{ }

.box-flex4 .item{ width: 100%; flex-grow: 1; word-break: break-all; } /* 设置width可避免item里内容过多时。该元素相对其他兄弟元素变宽 */

/* flex流式布局 */

.box-flex5{ flex-wrap: wrap; justify-content: flex-start; }

.box-flex5 .item{ flex-basis: 32%; }

/* flex水平垂直居中 */

.box-flex6{ width:300px; height:300px; justify-content: center; align-items: center; }

.box-flex6 .item{ flex-basis: 33%; }

/* flex对折线 */

.box-flex7{ flex-direction: column; width: 300px; }

.box-flex7 .item-wp{ display: flex; }

.box-flex7 .item-wp:nth-child(1){ }

.box-flex7 .item-wp:nth-child(2){ justify-content: center; align-items: center; }

.box-flex7 .item-wp:nth-child(3){ justify-content: flex-end; align-items: flex-end; }

.box-flex7 .item{ flex-basis: 33%; }

/* flex各种对齐方式 */

.box-flex8{ flex-direction: column; }

.box-flex8 .item-wp{ display: flex; }

.box-flex8 .item-wp:nth-child(1){ justify-content: space-around; }

.box-flex8 .item-wp:nth-child(2){ justify-content: space-between; }

.box-flex8 .item-wp:nth-child(3){ justify-content: flex-start; }

.box-flex8 .item-wp:nth-child(4){ justify-content: center; }

.box-flex8 .item-wp:nth-child(5){ justify-content: flex-end; }

.box-flex8 .item{ flex-basis: 25%; }

Written by Hershin

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！