flex是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- IE11或更低版本不支持flex或仅支持部分
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
1.0 父项常见属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
- flex: 定义子项目分配剩余空间，用flex来表示占多少份数。
- align-self: 控制子项自己在侧轴上的排列方式,允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
- order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0。
1.1 实现效果
WechatIMG5548.png
1.2 代码如下
ul {
padding: 0 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
li {
list-style-type: none;
margin-bottom: 10px;
width: calc(100%/ 4);
}
ul li a {
display: flex;
flex-direction: column;
align-items: center;
}
ul li a span:nth-child(2) {
margin-top: 10px;
}
.local-icon1 {
display: block;
background: url('../imgs/localnav_bg.png') no-repeat 0 0;
background-size: 32px 160px;
width: 32px;
height: 32px;
}
<ul>
<li>
<a href="#">
<span class="local-icon1"></span>
<span>吃喝玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-icon2"></span>
<span>吃喝玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-icon3"></span>
<span>吃喝玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-icon4"></span>
<span>吃喝玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-icon5"></span>
<span>吃喝玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-icon5"></span>
<span>吃喝玩乐</span>
</a>
</li>
</ul>
