## 案例：请按下图进行页面布局
~~~
<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
