使用 CSS，您可以在 dom 节点中使项目水平*和*垂直均匀分布吗？

Question

如果我有这样的html：

<div id="a">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
</div>

我知道我可以使用flex 框、justify-content: space-around 和flex-wrap:wrap 将项目很好地隔开，如图中的红色框。但我想知道，是否有可能仅使用 css 使项目彼此分开，以便项目垂直和水平展开，就像在绿色图像中它会尝试放置相同的数字一样每行/行中的项目数（只要它们都是相同的尺寸）？

我感兴趣的是您事先不知道主 div #a 中有多少项目，并且您也不知道它们的宽度。

这是一个红框版本的 js-fiddle：https://jsfiddle.net/p0Lahgbj/

Answer 1

使用 CSS vw 单位：

#a {
    border: 1px solid gray;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 450px;
}
#a > div {
    border: 1px solid red;
    width: 100vw;     
    max-width: 33%; /* to have 3 columns */
    box-sizing: border-box;
}

<div id="a">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
</div>

9 盒：

[---] [---] [---]
[---] [---] [---]
[---] [---] [---]

10 盒：

[---] [---] [---]
[---] [---] [---]
      [---]

11 盒：

[---] [---] [---]
[---] [---] [---]
   [---] [---]

等等……

JsFiddle 9 盒

JsFiddle 10 盒

JsFiddle 11 盒