Profile

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

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

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

目次

dtとddをflexで横並びのサンプル

花組
●トップスター：柚香光さん
●トップ娘役　：星風まどかさん
月組
●トップスター：月城かなとさん
●トップ娘役　：海乃美月さん
雪組
●トップスター：彩風咲奈さん
●トップ娘役　：朝月希和さん
星組
●トップスター：礼真琴さん
●トップ娘役　：舞空瞳さん
宙組
●トップスター：真風涼帆さん
●トップ娘役　：潤花さん

※2022年8月現在

コピペはこちらから

<dl class="list">
  <dt>2022年7月21日</dt>
  <dd>テキストが入ります。</dd>
  <dt>2022年8月7日</dt>
  <dd>複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。</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を上下中央に配置したい場合はここからもう一工夫が必要です。

2022年7月21日
テキストが入ります。
2022年8月7日
複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。

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

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

2022年7月21日
テキストが入ります。
2022年8月7日
複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。

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

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

.list dt,
.list dd {
  display: flex;
  align-items: center;
}
2022年7月21日
テキストが入ります。
2022年8月7日
複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。複数行にわたってテキストが入ります。

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

まとめ

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

関連記事