如果li列表高于UL而不是strech ul宽度

Question

我需要创建一个LI列表，其中显示的是图像，如果LI列表高度不高于UL列表，则应该显示在一行中。

如果LI列表的高度大于UL列表，则应将它们放在两个colones中。 这里是使用Fidle的小提琴，但是使用float：left，它会自动对齐左边的第二个LI（相反，它应该在第一个LI下面，如果UL中没有更多的空间，那么它应该是跳上新的一行）。

这是一张更好解释的图片：|

Answer 1

flexbox可以通过一些约束来做到这一点，例如需要修复ul的高度以强制包装。

Chrome浏览器中有关于Flexbox中的列包装的错误，但仍然存在错误。

* {
  box-sizing: border-box;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
  margin-left: 10%;
}
.box {
  width: 40px;
  height: 40px;
  background: #c0ffee;
  border: 1px solid blue;
  border-radius: 50%;
  margin: 5px;
}

<ul>
  <li>
    <div class="box"></div>
  </li>
  <li>
    <div class="box"></div>
  </li>
</ul>

<ul>
  <li>
    <div class="box"></div>
  </li>
  <li>
    <div class="box"></div>
  </li>
  <li>
    <div class="box"></div>
  </li>
  <li>
    <div class="box"></div>
  </li>
  <li>
    <div class="box"></div>
  </li>
  <li>
    <div class="box"></div>
  </li>
</ul>