对于学习了弹性盒的我们来说，需要使用大量案例来充实自己，今天我们参照每日优鲜的底部排版来布局吧！
图片1.png
html结构如下：
<ul>
<li><a href=""><i class='icon iconfont icon-shouye'></i><span>首页</span></a></li>
<li><a href=""><i class='icon iconfont icon-shouye'></i><span>发现</span></a></li>
<li><a href=""><i class='icon iconfont icon-shouye'></i><span>分类</span></a></li>
<li><a href=""><i class='icon iconfont icon-shouye'></i><span>购物车</span></a></li>
<li><a href=""><i class='icon iconfont icon-shouye'></i><span>我的</span></a</li>
</ul>
css样式如下：
*{//1、给ul、li、a标签的默认样式清除
margin:0px;
padding:0px;
}
li{
list-style:none;
}
a{
text-decoration:none;
color:#000;
}
2、给ul添加样式并加上flex弹性盒
ul{
width:100%;
height:50px;
background:#f4f4f4;
display:flex;
display:-webkit-flex;
}
图片4.png
下面让li有间隔并且垂直居中
ul{
width:100%;
height:50px;
background:#f4f4f4;
display:flex;
display:-webkit-flex;
align-items:center;
justify-content:space-between;
}
效果如下：
图片5.png
接下来要考虑的是图标和文字如何上下对齐，我们接着往下想
li{
display:flex;
display:-webkit-flex;
flex-direction:column;
text-align:center;
}
效果如下：
图片6.png
这里用到了弹性盒的知识点有：
1、display:flex;转化为弹性盒布局
2、justify-content:水平方向对齐方式
3、align-items:垂直方向上的对齐方式
4、flex-direction 元素排列方式
