html - 如果 li 列表高于 UL，则拉伸(stretch) ul 宽度

Question

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

如果 LI 列表的高度大于 UL 列表，则应将它们放在两个冒号中。 这是我使用的 fiddle Fidle ，但使用 float: left 时，它会自动将第二个 LI 左对齐(如果 UL 中没有更多空间，它应该在第一个 LI 下方，而不是跳到新行)。

为了更好的解释，这里有一张图片:|

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>