css flex 弹性布局详解

案例基础布局

html

<ul class="box">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

css

.box{
display: -webkit-flex;
display: flex;
}
.item{
width: 200px;
height: 300px;
background: red;
border: 1px solid #ccc;
font-size: 50px;
text-align: center;
line-height: 300px;
color:#fff;
}

因为flex主要方便与移动端布局，所以测试以谷歌模拟移动端看效果：

因为使用 flex 布局，子元素默认是横向排列，所以不需要float，也不起作用；

父盒子属性探究

flex-direction

flex-direction 表示子元素的排列方向和顺序；默认 row （横排，左到右）； row-reverse 表示 横排右到左

.box{
display: -webkit-flex;
display: flex;
flex-direction:row-reverse;
}

如果每个把每个 li 设置为 width：3000px;(当前屏幕宽度980px),效果：

子元素宽度超出，不但没有换行，会自动适应大小，平分为 25%；

上面的平分 只是在 row 的时候 会平分，如果是换成竖向排列：

flex-direction: column;

元素不会被挤压了，拥有3000px宽；但是要注意，它不是因为不够空间而换行了，只是column 值规定了它 竖向排列

下面的值可以调整为 倒序竖向排列

flex-direction: column-reverse; //表示元素竖直 反向排

flex-wrap

flex-wrap 默认 nowrap：不换行。上面的3000px 子元素正是因为 这个竖向默认是不会换行的，所以 上面设置3000px宽，不会换行；

同样的代码，如果加多一句

.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap; //换行，第一行在上方。
}