dlタグでflexレイアウトを使って困った時はdivが良い？

自分は、「W3C準拠を完全に守る」というタイプではなく、「ある程度、融通効かせてもいいんじゃないの？」というタイプの人間ですが、なるべく文章構造的に正しくするようには努めています。

そんな中で、これdlタグで作った方がいいようなという状況も多々あるわけですが、先日、仕事で行った実装の中で、flexが良いよなと思って、displayにflexを設定したときに困った状況に。

例えばこんなHTMLで

<dl>
    <dt>タイトル1</dt>
    <dd>データ1</dd>
    <dt>タイトル2</dt>
    <dd>データ2</dd>
    <dt>タイトル3</dt>
    <dd>データ3</dd>
</dl>

1行にdtとddがひとつのみ、dtの長さは決まっていて、ddの長さは残りの隙間を全部埋めたいという状況があったとします。もちろん以下ではうまく行きません。

dl {
    display: flex;
    flex-wrap: wrap;
}
dt {
    width: 200px;
}
dd {
    flex: auto;
}

強制改行してみる？

調べていたら、以下のような情報が、

How to specify line breaks in a multi-line flexbox layout?

要は、ある要素の後に、強制改行するようにするCSSの書き方が紹介されています。確かに、そうすれば解決するけど、美しくないしセマンティックじゃないので、最終手段として保留。「dt、ddを囲めるタグがあればいいんだけどなぁ」と思い、実はそんなタグあるんじゃないかと思って、dlについて詳しく調べてみることに。

dlの直下にdiv置けます

dlの入れ子について見ていたら以下の記事がありました。

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

dlタグに入れられるタグに、「div/dt/dd」と書いてありました。「そうなの！？」と思って、検索を続けると、

dlタグ直下にdivタグはアリなのか？タグの入れ子問題

という記事も。どうやらHTML5.2勧告時（2017年）にdivが使えるように仕様変更があったようです。

参考：HTML5.1、5.2での仕様変更点をメモ。

これによって先ほどのHTMLとCSSは以下のように書けるようになりめでたしめでたしです。divで囲むことで、flexでの使い勝手もよくなり、レスポンシブもやり易くなるので、dlを使う時は覚えて置いて損の無い知識ですね！

<dl>
    <div>
        <dt>タイトル1</dt>
        <dd>データ1</dd>
    </div>
    <div>
        <dt>タイトル2</dt>
        <dd>データ2</dd>
    </div>
    <div>
        <dt>タイトル3</dt>
        <dd>データ3</dd>
    <div>
</dl>

dl > div {
    display: flex;
    flex-wrap: wrap;
}
dt {
    width: 200px;
}
dd {
    flex: auto;
}