1. ホーム
  2. html

[解決済み] フレックスコンテナ内の等高線列

2022-06-16 16:16:26

質問

ご覧のように 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>

どのように解決するのですか?

答えは「NO」です。

理由はフレックスボックスの仕様に記載されています。

6. フレックスライン

複数行のフレックスコンテナでは、各行のクロスサイズは、その行のフレックスアイテムを含むために必要な最小サイズとなります。

つまり、行ベースのフレックスコンテナで複数の行がある場合、各行の高さ("クロスサイズ")は、その行のフレックスアイテムを含むのに必要な最小の高さとなります。

しかし、同じ高さの行は、CSS グリッドレイアウトで可能です。

それ以外の場合は、JavaScriptの代替を検討してください。