Html 弹性容器中的等高行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36004926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Equal height rows in a flex container
提问by Jinu Kurian
As you can see, the list-itemsin the first rowhave same height. But items in the second rowhave different heights. I want all items to have a uniform height.
如您所见，list-items第一个row具有相同的height. 但在第二个项目row有不同heights。我希望所有物品都有统一的height.
Is there any way to achieve this without giving fixed-heightand only using flexbox?
有什么方法可以在不提供固定高度且仅使用flexbox 的情况下实现这一目标？
Here is my code
这是我的 code
.list {
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>
</ul>采纳答案by Michael Benjamin
The answer is NO.
答案是不。
The reason is provided in the flexbox specification:
原因在 flexbox 规范中提供：
In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.
在多行 flex 容器中，每行的交叉大小是包含行上的 flex 项目所需的最小大小。
In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the minimum height necessary to contain the flex items on the line.
换句话说，当基于行的 flex 容器中有多行时，每行的高度（“交叉大小”）是包含行上的 flex 项目所需的最小高度。
Equal height rows, however, are possible in CSS Grid Layout:
然而，在 CSS 网格布局中可以使用等高的行：
Otherwise, consider a JavaScript alternative.
否则，请考虑 JavaScript 替代方案。
回答by Lucas Basquerotto
You can accomplish that nowwith display: grid:
你现在可以用display: grid：
.list {
display: grid;
overflow: hidden;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>
</ul>Although the grid itself is not flexbox, it behaves very similar to a flexboxcontainer, and the items inside the grid can be flex.
尽管网格本身不是 flexbox，但它的行为与 flexbox容器非常相似，网格内的项目可以是 flex。
The grid layout is also very handy in the case you want responsive grids. That is, if you want the grid to have a different number of columns per row you can then just change grid-template-columns:
如果您想要响应式网格，网格布局也非常方便。也就是说，如果您希望网格每行具有不同的列数，则可以更改grid-template-columns：
grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns
and so on...
等等...
You can mix it with media queries and change according to the size of the page.
您可以将其与媒体查询混合使用，并根据页面大小进行更改。
Sadly there is still no support for container queries / element queriesin the browsers (out of the box) to make it work well with changing the number of columns according to the container size, not to the page size (this would be great to use with reusable webcomponents).
遗憾的是，浏览器中仍然不支持容器查询/元素查询（开箱即用），以使其能够根据容器大小而不是页面大小更改列数（这很好用）使用可重用的 web 组件）。
More information about the grid layout:
有关网格布局的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Support of the Grid Layout accross browsers:
支持跨浏览器的网格布局：
回答by Ason
No, you can't achieve that without setting a fixed height (or using a script).
不，如果不设置固定高度（或使用脚本），您就无法实现这一点。
Here are 2 answers of mine, showing how to use a script to achieve something like that:
这是我的 2 个答案，展示了如何使用脚本来实现类似的目标：
回答by Kevin Danikowski
If you know the items you are mapping through, you can accomplish this by doing one row at a time. I know it's a workaround, but it works.
如果您知道要映射的项目，则可以通过一次执行一行来完成此操作。我知道这是一种解决方法，但它有效。
For me I had 4 items per row, so I broke it up into two rows of 4 with each row height: 50%, get rid of flex-grow, have <RowOne />and <RowTwo />in a <div>with flex-column. This will do the trick
对我来说，我每行有 4 个项目，所以我把它分成两行，每行 4 个height: 50%，去掉flex-grow， have<RowOne />和<RowTwo />in a <div>with flex-column。这将解决问题
<div class='flexbox flex-column height-100-percent'>
<RowOne class='flex height-50-percent' />
<RowTwo class='flex height-50-percent' />
</div>
回答by Stanislav E. Govorov
This seems to be working in cases with fixed parent height (tested in Chrome and Firefox):
这似乎适用于固定父高度的情况（在 Chrome 和 Firefox 中测试）：
.child {
height : 100%;
overflow : hidden;
}
.parent {
display: flex;
flex-direction: column;
height: 70vh; // ! won't work unless parent container height is set
position: relative;
}
If it's not possible to use grids for some reason, maybe it's the solution.
如果由于某种原因无法使用网格，也许这就是解决方案。
回答by Tom
In your case height will be calculated automatically, so you have to provide the height
use this
在您的情况下，高度将自动计算，因此您必须提供高度
使用此
.list-content{
width: 100%;
height:150px;
}
回答by Ajay Malhotra
you can do it by fixing the height of "P" tag or fixing the height of "list-item".
您可以通过固定“P”标签的高度或固定“list-item”的高度来实现。
I have done by fixing the height of "P"
我已经通过固定“P”的高度来完成
and overflow should be hidden.
和溢出应该被隐藏。
.list{
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item{
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content{
width: 100%;
}
p{height:100px;overflow:hidden;}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>
</ul>回答by Ankit
for same height you should chage your css "display" Properties. For more detail see given example.
对于相同的高度，您应该更改 css“显示”属性。有关更多详细信息，请参见给定示例。
.list{
display: table;
flex-wrap: wrap;
max-width: 500px;
}
.list-item{
background-color: #ccc;
display: table-cell;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content{
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>