ご覧のとおり、list-items最初の はrow同じですheight。しかし、2 番目の項目のrowは異なりますheights。すべての項目に均一な を持たせたいのですheight。
与えることなくこれを達成する方法はあるでしょうか？固定高さそして、フレックスボックス?
これが私の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>ベストアンサー1
答えはいいえだ。
その理由はフレックスボックスの仕様に記載されています。
複数行のフレックス コンテナーでは、各行のクロス サイズは、その行のフレックス アイテムを格納するために必要な最小サイズになります。
つまり、行ベースのフレックス コンテナーに複数の行がある場合、各行の高さ (「クロス サイズ」) は、行上のフレックス アイテムを格納するために必要な最小の高さになります。
ただし、CSS グリッド レイアウトでは、同じ高さの行が可能です。
それ以外の場合は、JavaScript の代替を検討してください。