移动端常用等分(平分宽度)的方法

在移动端中我们经常会遇到如上图淘宝的底部导航的情况，平分某一宽度

<header class="footer red">
    <ul class="nav">
        <li>简介</li>
        <li>订单</li>
        <li>账户</li>
    </ul>
</header>
<footer class="footer blue">
    <ul class="nav">
        <li>首页</li>
        <li>微淘</li>
        <li>社区</li>
        <li>购物车</li>
        <li>我的淘宝</li>
    </ul>
</footer>

（如果没有特别说明，网页代码不变）
方法一：，一般通常的做法是利用float，然后子元素的每一个宽度等于总宽度除以子元素的个数。以下是css代码：

.red{background:red;height:18px;color: #fff;}
.blue{background: blue;height:18px;color: #fff;}
/*以上代码为了区分两个导航*/
.nav,.nav_3{width: 100%;list-style: none;padding:0px;margin:0px;}
.nav li {float:left; width:20%;}
.nav_3 li {float:left; width:33.333%;}

效果展示：
虽然上面的方式可以解决问题，但是如果这个时候项目需求变更为把三个改为四个或者五个改为四个，那么你这边不仅需要改动css还要改动网页内容。
方法二：flex，用法非常简单，父容器里面定义display: flex;然后子元素定义flex: 1;就可以了，但是由于flex这个属性改版多次，所以兼容性。。。

.red{background:red;height:18px;color: #fff;}
.blue{background: blue;height:18px;color: #fff;}
/*以上代码为了区分两个导航*/
.nav,.nav_3{list-style: none;padding:0px;margin:0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.nav li,.nav_3 li{list-style: none;padding:0px;margin:0px;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;        /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;
}

方法三：display: table-cell;设置父容器的display: table;table-layout: fixed;width: 100%;，然后设置子元素为display: table-cell;就可以了。优点就是兼容性很好啊。css代码如下：

.red{background:red;height:18px;color: #fff;}
.blue{background: blue;height:18px;color: #fff;}
/*以上代码为了区分两个导航*/
.nav,.nav_3 {
  display: table;
  table-layout: fixed;
  width: 100%; 
  list-style: none;
  margin:0px;
  padding:0px;
}
.nav li,.nav_3 li {
    display: table-cell; }