伸缩方向列中的高度相等，但未设置高度 [英] Equal heights in flex-direction column without setting height

问题描述

我想要一个没有明确设置高度的flex容器，它的所有子容器都具有相同的高度.我不太清楚该如何实现.

I want a flex container that does not have an explicit height set with all of its children having equal height. I can't quite figure out how to implement this.

如果flex容器设置了高度，我可以使它工作，但是我希望它的高度根据子对象是动态的.同样，它们都应该相等(并根据最高子级来计算).我不想依靠js来使这种布局有效.

I can get it to work if the flex container has a height set, but I want its height to be dynamic based on the children. Again, they should all be equal (and calculated based on the highest child). I don't want to have to rely on js to make this layout work.

这里是我到目前为止所用的小提琴: https://jsfiddle.net/fL1gk17L/1/

Here's a fiddle for what I have so far: 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;
}

推荐答案

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

Try set display:flex;flex-wrap:wrap for parent div and set display:flex for child column. You achieve this without using column height.

.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>

这篇关于伸缩方向列中的高度相等，但未设置高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！