css - 使用 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 盒