## 案例:請按下圖進行頁面布局

~~~
<style>
*{margin: 0;padding: 0;}
.box{
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 800px;height: 200px;
background: #f1f1f1;
border: 1px solid #333;
box-sizing: border-box;
}
</style>
<body>
<div class="box">
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
<div class="box-content"></div>
</div>
</body>
~~~
### 1.1.解決方案一:子元素(即這里的box-content)使用浮動,代碼如下:
~~~
/*css樣式如下:*/
.box:after{content: "";display:table;clear:both;}/*使用浮動后必須進行清除*/
.box-content{width:20%;height:200px;float:left;}/*使用浮動后需要給浮動元素設置高度*/
.box-content:not(:last-child){
border-right:1px solid #333;
margin-left:-1px;
/*測試中發現當只給border-right時,最后一個元素會被擠到下一行,所以需要給一個外邊距*/
}
~~~
### 1.2解決方案二:父元素(即這里的box)設置display為flex,代碼如下:
~~~
/*css樣式如下:*/
.box{
display: flex;
flex-direction: row;/*row是默認值,flex-direction屬性決定主軸的方向(即項目的排列方向)。*/
justify-content: space-around;/*justify-content屬性定義了項目在主軸上的對齊方式。*/
}
.box-content{
flex-grow: 1;/*flex-grow屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。*/
}
.box-content:not(:last-child){
border-right: 1px solid #333;
}
~~~
:-: 下面的鏈接有關于flex布局方式的詳細用法:在其中主要看的屬性有:flex-direction,justify-content,align-items,order,flex-grow
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool