## 案例：請按下圖進行頁面布局
~~~
<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
