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

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