说明：请使用chrome浏览器打开
See the Pen pvyjGV by lilyH (@lilyH) on CodePen.
如上图所示，我们你要实现的效果就是，（1）在一行中显示两块元素；（2）每块元素的长度根据它里面的文字变化
还是先看代码吧：
HTML
<ul class="flex-container"> <li class="flex-item"><div>1234567</div></li> <li class="flex-item"><div>2</div></li> <li class="flex-item"><div>2</div></li> <li class="flex-item"><div>11111</div></li> <li class="flex-item"><div>11111111111111111111</div></li> <li class="flex-item"><div>22222222222222222222222222222222222222222222222</div></li> </ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between;
}
.flex-item {
flex-grow:1;
min-width:40%;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.flex-item div{
background: tomato;
height: 150px;
line-height: 150px;
}
.flex-item:nth-of-type(2n+1) div{
margin-right: 5px;
}
.flex-item:nth-of-type(2n) div{
margin-left:5px;
}
说明：
关于flex属性的具体说明，请参考flex全揭秘
（1）容器，flex-container上，设置display:flex；表示里面的子元素走的是flex的布局
（2）容器，flex-container，设置-webkit-flex-flow: row wrap;表示子元素横向排列,多行
（3）容器，flex-container，设置justify-content: space-between;子元素在一行上散落开
（4）子元素，flex-item，设置flex-grow:1; 子元素充满能空间（去掉看看是什么效果）
（5）子元素，flex-item，设置min-width:40%; 这个是关键（可以试试其他的值）
a. 都知道设置50%，那么两个元素是一样大的充满空间；大于50%，那么一行上肯定放不下两个元素
b.因为设置的最小的宽度，如果宽度过小，比如10%，而子元素中的内容又过少的时候，这个时候一行上就会出现不止2个子元素
c. 考虑到如果三个紧挨着的子元素如果都只有一个“字”的内容的话，宽度至少要设置到33.33%；所以宽度值应该是在33.33%到50%之间（假设子元素没有margin等其他让它“变大”的属性）
d. 假设我们设置min-width：35%，（1）那么如果同一行的两个子元素a、b，a内容大于等于65%宽，当b内容超过了35%宽时，后面元素会被挤到下一行；（2）如果同一行的两个子元素a、b，a的内容很少，但是因为它至少占35%的宽，当b的内容超过了65%宽的时候，后面的子元素会被挤到下一行。
根据上面的原理，可以通过评估项目中子元素的内容的长度来设定min-width的值，所以这只能算做一种简单的方法，要真正做到按内容文字长度伸缩容器大小并且排满一行的情况，请使用JS.
ps : 代码中的flex是w3c标准的写法，兼容android和ios的写法，请利用此工具