弹性盒案例

对于学习了弹性盒的我们来说，需要使用大量案例来充实自己，今天我们参照每日优鲜的底部排版来布局吧！

图片1.png

 <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 元素排列方式