Question

我想要一个Flex容器，它没有明确的高度设置，其所有子节点都具有相同的高度。我无法弄清楚如何实现这一点。

如果flex容器有一个高度设置，我可以让它工作，但我希望它的高度是基于孩子的动态。同样，它们应该是相等的（并根据最高的孩子计算）。我不想依赖js来使这个布局工作。

到目前为止，这里有一个小提琴：https://jsfiddle.net/fL1gk17L/1/

HTML

<div id="wrapper" class="wrapper">
  <div class="inner">Some text</div>
  <div class="inner">Some text</div>
  <div class="inner">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    Some text Some text </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.inner {
  outline: 1px solid black;
  flex-grow: 1;
  flex-basis: 0;
}

Answer 1

尝试为父div设置display:flex;flex-wrap:wrap，为子列设置display:flex。您无需使用列高即可实现这一点。

.wrapper {
  display: flex;
  flex-wrap:wrap;
}

.inner {
  outline: 1px solid black;
  flex-grow: 1;
  flex-basis: 0;
  display:flex;
}

<div id="wrapper" class="wrapper">
  <div class="inner">Some text</div>
  <div class="inner">Some text</div>
  <div class="inner">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    Some text Some text </div>
</div>

在没有设定高度的情况下，在弯曲方向柱上的高度相等

1 个答案: