gpt4 book ai didi

html - flex 容器中的等高行

转载 作者:行者123 更新时间:2023-11-27 23:32:45 30 4
gpt4 key购买 nike

如您所见,第一中的list-items具有相同的高度。但是第二个 中的项具有不同的高度。我希望所有元素都具有统一的高度

有没有办法在不提供固定高度并且只使用flexbox的情况下实现这一点?

enter image description here

这是我的代码

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

最佳答案

答案是否定的。

flexbox规范中给出了原因:

6. Flex Lines

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 元素所需的最小高度。

然而,等高行在 CSS 网格布局中是可能的:

否则,请考虑使用 JavaScript 替代方案。

关于html - flex 容器中的等高行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57401679/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com