【CSS】dtとddをflexで横並び、上下中央に配置して高さも揃える

dtとddをflexで横並びにして、さらに上下中央に配置しつつdtとddどちらかが複数行になった場合でも高さが揃うようにするやり方です。

dtとddをflexで横並びにして上下中央に配置しつつ高さも揃えるサンプル

コードはこちら

<dl class="list">
  <dt>テキスト01</dt>
  <dd>テキスト01についての説明文が入ります。</dd>
  <dt>テキスト02</dt>
  <dd>複数行にわたってテキスト02についての説明文が入ります。複数行にわたってテキスト02についての説明文が入ります。複数行にわたってテキスト02についての説明文が入ります。</dd>
</dl>

.list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.list dt, .list dd {
  box-sizing: border-box;
}
.list dt {
  display: flex;
  align-items: center;
  width: 30%;
  padding: 20px;
  background-color: #AEDFBE;
  border-bottom: 1px solid #999;
}
.list dt:last-of-type,
.list dd:last-of-type {
  border: none;
}
.list dd {
  display: flex;
  align-items: center;
  width: 70%;
  margin-left: 0;
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #999;
}

【ざっくり解説】上下中央に配置しつつ高さを揃える方法

横並びが完成した状態

下記がflexで横並びにした時点のもの。これでOKであれば完成ですが、もしdtとddを上下中央に配置したい場合はここからもう一工夫が必要です。

dl（親要素）にalign-items:centerを記述するとうまくいかない

上下中央揃えにしたいからalign-items:centerだ、とdlに追記すると下記のようになってしまいます。思ってたのと違う。

dtとdd（子要素）にalign-items:centerを記述

高さを揃えるポイントは、もともとdisplay:flexを指定しているdl（親要素）ではなく、その子要素であるdtとddにalign-items:centerを記述することです。下記のコードを加えることで目指していた状態が完成します。

.list dt,
.list dd {
  display: flex;
  align-items: center;
}

ちなみにdtやdd内に複数の要素が並ぶ場合はこのままだとflexの影響で横並びになってしまうので、dtとdd直下にdivをひとつ入れておくのが簡単な解決法かなと思います。

まとめ

dtとddのテキスト量がいろいろ変わっても高さが自動で揃うので、この方法はおすすめです。