flex 实现三栏等分布局

    <ul>
      <li>左</li>
      <li>中</li>
      <li>右</li>
    </ul>

将下列布局三等分如下图：

方法一：

        父子元素宽度设为相等宽度；

        父元素： display: flex;

        子元素： flex：auto；（ 即 flex: 1 1 auto;）

解析：可以看到width的设置，ul 和 li 均是600px，但是实际看到的确实li平分了ul的宽度，这是因为设置了flex：auto，代表有剩余空间的话项目等分剩余空间放大，空间不足项目等比例缩小；

    <style>
      * {
        list-style: none;
        border: 0;
        padding: 0;
        margin: 0;
      }
      ul {
        width: 600px;
        height: 200px;
        background: rgb(71, 177, 209);
        padding: 0 10px;

        display: flex;
        margin: auto;
        align-items: center;
      }
      li {
        background: rgb(250, 250, 250);
        width: 600px;
        height: 100px;

        margin: 10px;
        line-height: 100px;
        text-align: center;
        flex: auto;
      }
    </style>

方法二：

  父子元素宽度设为相等宽度；

        父元素： display: flex;

        子元素： flex：1 1 33.33%；

    <style>
      * {
        list-style: none;
        border: 0;
        padding: 0;
        margin: 0;
      }
      ul {
        width: 600px;
        height: 200px;
        background: rgb(71, 177, 209);
        padding: 0 10px;

        display: flex;
        margin: auto;
        align-items: center;
        margin-top: 200px;
      }
      li {
        background: rgb(250, 250, 250);
        width: 600px;
        height: 100px;

        margin: 10px;
        line-height: 100px;
        text-align: center;
        flex: 1 1 33.33%;
      }
    </style>

效果如下图：