利用flexbox实现按字符长度排列dom元素

说明：请使用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:;

  margin:;

  list-style: none;

  display: flex;

  -webkit-flex-flow: row wrap;

  justify-content: space-between;

}

.flex-item {

  flex-grow:;

  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的写法，请利用此工具

注明：利用上面的工具生成的兼容方法在ios下有问题，没有换行，还未找到方法，先mark下~