有没有一种仅使用CSS的解决方案可以使垂直网格中的div等高？

Question

我有一个名为.parent的div，在这个div内部还有数量未知的.child div。我需要将子div放在垂直网格中，并且它们都需要具有相同的高度。不幸的是，我不能使用javascript来实现这一点。

我尝试过不同的display: inline-block和float: left的组合，但我无法使子元素具有相同的高度。

我可以使用display: table-cell来实现同等的高度，但是如果总宽度超过容器宽度，则会遇到另一个问题，即子元素不会分成多行。

有没有一种纯CSS的方法来解决这个问题？如果有必要支持IE10+，那么如何实现（是否用flexbox）？

- reggaemahn

---

flexbox 可以帮助（不需要设置显式高度），但每行的高度将会匹配，而且每一行的高度可能会不同... - kukkuz

没问题。只要每一行的高度都相同就可以了。 - reggaemahn

好的，请查看下面我创建的演示 - 它会随着窗口宽度的变化进行自动换行，每行具有相同的高度... - kukkuz

你真是个明星！！ - reggaemahn

Answer 1

您可以使用包装类（wrapping）的 flexbox - 当子 div 包装并随窗口调整大小时，高度会自动调整（这是由于默认的 align-items:stretch 属性）。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
}
.wrapper > div {
  border: 1px solid red;
}

<div class="wrapper">
  <div>
    some text here some text here
  </div>

  <div>
    some text here
    <br/>more text here
  </div>

  <div>
    some text here
    <br/>more text here and some more and some more
  </div>

  <div>
    some text here
    <br/>more text here
    <br/>more text here
  </div>

</div>

- kukkuz

Answer 2

是的，你可以使用flexbox。

.parent{
    display: flex;
}
.child{
    flex:1;
}

- Myriam Lefebvre

---

IE10的flex部分支持对这个设置会有问题吗？ - reggaemahn

此外，如果您调整窗口大小，似乎无法将子元素分成多行。 - reggaemahn

Answer 3

你可以尝试使用视口单位。

类似这样的代码可能会起作用：

.child {
    height: 1vw;
}

这将使子元素具有视口宽度的1/100。

阅读更多关于视口单位的内容

视口单位支持

- vsgoulart

---

如果内容超过该高度，这将使子元素拥有滚动条。 - reggaemahn