flex 实现三栏等分布局

    

      
左
      
中
      
右
    

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

 

方法一：

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

        父元素： display: flex;

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

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

方法二：

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

        父元素： display: flex;

        子元素： flex：1 1 33.33%；

 

效果如下图：