Flex 容器中的等高行

正如您所看到的，第一个 row中的 list-items具有相同的 height。但是第二个 row中的项目有不同的 heights。我希望所有的项目有一个统一的 height。

有没有什么办法可以做到这一点，而不给 固定高度，只使用 弹簧箱？

enter image description here

这是我的 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>

324520 次浏览
小开

对于相同的高度你应该改变你的 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>

小开

在您的情况下高度将自动计算，所以您必须提供的高度
用这个

.list-content{
width: 100%;
height:150px;
}
小开

可以通过固定“ P”标签的高度或固定“ list-item”的高度来实现。

我通过修正“ P”的高度

和溢出应该被隐藏。

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

小开

不，如果不设置固定的高度(或使用脚本) ，就无法实现这一点。

下面是我的两个答案，展示了如何使用脚本来达到这样的效果:

小开
最佳答案

答案是否定的。

原因在软盒规格中有说明:

6. 柔性线

在多行 Flex 容器中，每行的交叉大小是在行上包含 Flex 项所必需的最小大小。

换句话说，当一个基于行的 flex 容器中有多行时，每行的高度(“ cross size”)是在行上包含 flex 项所必需的最小高度。

不过，在 CSS 网格布局中可以使用等高行:

否则，考虑一个 JavaScript 替代品。

小开

如果你知道你正在映射的项目，您可以通过一次执行一行来完成此操作。我知道这是一个变通方案，但它的工作。

对我来说，我有4个项目每行，所以我把它分成两行4与每行 height: 50%，摆脱了 flex-grow，有 <RowOne />和 <RowTwo />在 <div>与 flex-column。这样就行了

<div class='flexbox flex-column height-100-percent'>
<RowOne class='flex height-50-percent' />
<RowTwo class='flex height-50-percent' />
</div>
小开

这似乎在父母身高固定的情况下(在 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;
}

如果由于某种原因不能使用网格，也许这就是解决办法。

小开

你现在可以用 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>

尽管网格本身不是 Flexbox，但它表现为 非常类似于弹簧盒容器和 网格中的项目可以是可伸缩的。

在需要响应式网格时，网格布局也非常方便。也就是说，如果希望网格每行的列数不同，那么只需更改 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

诸如此类。

您可以将其与媒体查询混合，并根据页面大小进行更改。

遗憾的是，浏览器中仍然不支持 容器查询/元素查询(开箱即用) ，无法根据容器大小改变列的数量，而不是页面大小(这对于可重用的 Web 组件来说非常有用)。

关于网格布局的更多信息:

Https://developer.mozilla.org/en-us/docs/web/css/css_grid_layout

跨浏览器支持网格布局:

Https://caniuse.com/#feat=css-grid

小开

你可以用 Flexbox 解决水平问题:

.flex-list {
padding: 0;
list-style: none;
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
}
.flex-list li {
width: 120px;
padding: .5rem;
border-radius: 1rem;
background: yellow;
}
<ul class="flex-list">
<li>title 1</li>
<li>title 2</li>
<li>title 3<br>new line</li>
<li>title 4<br>new line</li>
<li>title 5<br>new<br>line</li>
<li>title 6</li>
</ul>

或者使用网格解决横向和纵向问题:

.grid-list {
padding: 0;
list-style: none;
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
}
    

.grid-list li {
padding: .5rem;
border-radius: 1rem;
background: yellow;
}


.grid-list li:last-child {
grid-column-start: 2;
}  
<ul class="grid-list">
<li>title 1</li>
<li>title 2<br>new<br>line</li>
<li>title 3<br>new line</li>
<li>title 4<br>new line</li><li>title 5</li>
<li>title 6<br>new<br>line</li>
<li>title 7</li>
</ul>

小开

你应该使用 justify-content:stretch和 align-items:stretch属性为你的 Flex 显示，我认为这将使每个元素的高度，在 flex，相等

小开

你可以这样做:

align-items: stretch;

这将把每个项目拉伸到元素的高度，并在 Flex 中设置最大高度。

小开

Flexbox: 让所有的伸缩项目都保持同样的高度？

在子项中

align-self: stretch;

或在父容器中

justify-content: stretch;

提交答案