html - 是否有仅 CSS 的解决方案可以使垂直网格中的 div 等高？

Question

我有一个 .parent div，在其中我有一个未知 数量的 .child div。我需要子 div 位于垂直网格中，并且所有子 div 都需要等高。不幸的是，我不能为此使用 javascript。

我已经尝试了 display: inline-block 和 float: left 的不同组合，但我无法让子项具有相同的高度。

我可以使用 display: table-cell 达到相同的高度，但后来我遇到了另一个问题，如果总宽度超过容器宽度，子元素不会拆分成多行。

有没有办法用纯 css 做到这一点？如果有帮助，我只需要支持 IE10+(flexbox？)

Answer 1

您可以使用环绕 flexbox - 查看高度是如何自动调整的(由于 align-items:stretch 属性是默认值)当您调整窗口大小时子 div 换行。

* {
  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>