案例基礎布局

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; //換行，第一行在上方。
}