Flexbox Equal Height Column

Question

当前状态

.col-container {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
}
.col {
padding: 4rem;
margin: 1rem 1rem 0rem 1rem;
flex-basis: 25rem;
flex-grow: 1;
background-color: #191d2b;
}

<div class="col-container">
<div class="col" style="background:orange">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col" style="background:yellow">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col" style="background:orange">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>

周一快乐,

我有一个问题，如何使等高列?当我有很多内容时，它会破坏设计。有人可以建议我如何创建一个相等的高度列吗?基本上基于内容，所有其他列动态调整其高度，但我想让宽度保持不变，在移动设备上，宽度变成100%。为了添加更多的信息，我试图创建一个响应网格使用相同的高度-宽度列使用flexbox.

Answer 1

您将align-items: stretch添加到.col-container。这将拉伸所有列以填充父列的高度。

这是一个很好的flexbox参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

使用CSS网格:

.col-container {
display: grid;
grid-auto-rows:1fr; /* this will make sure the height is the same even after wrapping*/
grid-template-columns:repeat(auto-fit,minmax(25rem,1fr));
}
.col {
padding: 4rem;
margin: 1rem 1rem 0rem 1rem;
background-color: #191d2b;
}

<div class="col-container">
<div class="col" style="background:orange">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col" style="background:yellow">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col" style="background:orange">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>