学習記録

学習したことをより深く理解するために、アウトプットする場所として利用しています。

別要素によるflexの高さを揃える

テキストによる、高さが変動する要素を2つ用意する。 下記のように、テキストが揃わない2つの要素がある場合、JavaScriptで計算して高さを揃える必要がある。

html

  <body>
    <div class="wrap">
      <ul class="list list-1">
        <li class="item-1">固定の要素</li>
        <li class="item-2">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-3">変動</li>
        <li class="item-4">固定の要素</li>
      </ul>
      <ul class="list list-2">
        <li class="item-1">固定の要素</li>
        <li class="item-2">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-3">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-4">固定の要素</li>
      </ul>
    </div>
  </body>

css

.wrap {
  display: flex;
}

.list {
  width: 200px;
  list-style: none;
  display: flex;
  flex-direction: column;
}

li {
  padding: 10px;
  border-bottom: 1px solid gray;
}

.item-1,
.item-4 {
  flex: 0;
}

.item-2 {
  flex: 1;
}

.item-3 {
  flex: 1;
}

変動する要素が1つの場合

ただし、変動する要素が1つの場合は、flex: 1; を指定することで高さを揃えることができる。

html（高さが変動する要素を1つに修正） html

  <body>
    <div class="wrap">
      <ul class="list list-1">
        <li class="item-1">固定の要素</li>
        <li class="item-2">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-4">固定の要素</li>
      </ul>
      <ul class="list list-2">
        <li class="item-1">固定の要素</li>
        <li class="item-2">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-4">固定の要素</li>
      </ul>
    </div>
  </body>