由flex布局制作的手机端底部导航栏

        大家好，今天小明给大家带来一个由flex布局制作的手机端底部导航栏，下面请让我们欣赏代码的魅力！

        因为本人近期在做vue项目，大家可以把标签看成

标签。

        下面请大家欣赏HTML代码：

      首页
      抢票
      订单
      我的
    

 然后大家在瞅瞅css代码：

.navbar{
        width: 100%;
        height: 50px;
        background-color: #ffffff;
    //在这里我使用了固定定位position: absolute； 让ui标签固定在底部
        position: absolute;
        bottom: 0;
    //把li指定弹性盒子
        display: flex;
      }
li{
    //让li标签从左往右横向排列，把li由纵向排列变为横向排列
     flex-direction: row;
    //flex: 1;可以看成：
    //flex-grow:1;
    //flex-shrink:1;
    //flex-basis:0%;
     flex: 1;
    //让文字左右居中排列
     text-align: center;
    // 让文字上下居中排列
     margin: auto 0;
      cursor: pointer;
        }

 下面我给大家简介felx ： 1的意思

• flex:1实际代表的是三个属性的简写
• flex-grow是用来增大盒子的，默认是0，如果为1，等分； 2，比1占据的空间大；
• flex-shrink是用来缩小盒子的，（元素所占的空间缩小）（默认为1，）等比例缩小，如果为0，当前的不缩小
• flex-basis是子元素占据主轴的空间，默认为子元素的原大小

所以flex：1；的逻辑就是子元素是原大小，然后再用flex-grow和flex-shrink增大的增大缩小的缩小，达成最终的效果。

这就是我们最后达到的一个成果图：