但是用户以及设计师肯定不希望看到这样的界面。他们肯定希望界面是这样的：
减少一个li节点后：
删除两个li节点后如下：
那么这里用display:flex布局是最好不过的了，新的flexbox布局模式被用来重新定义CSS中的布局方式：
CSS Code复制内容到剪贴板
ul {
display:flex;//表示改直接子元素用flex布局，默认横向布局
}
ul li {
/*width: 32.9%;*/
/*float: left;*/
border-right: 1px solid #fa9900;
padding: 5px 0;
flex: 1;表示子元素之间平均分配
}
可见用flex布局非常完美，这就是flex布局的牛逼之处。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。为了兼容更多的浏览器，也可以这样写：
display: flex;display: -webkit-box;这两个属性的方法作用相同。
Example 2： flexbox不等分布局
CSS Code复制内容到剪贴板
<div class="container">
<section class="initial">
<p>
空间足够的时候，我的宽度是200px，如果空间不足，
我会变窄到100px，但不会再窄了。
</p>
</section>
<section class="none">
<p>
无论窗口如何变化，我的宽度一直是200px。
</p>
</section>
