CSS　横幅に応じて横列が変わるdlの配置

 <div class="category_box">


    <dl>
        <dt>Title</dt>
        <dd>
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </dd>
    </dl>

    <dl>
        <dt>Title</dt>
        <dd>
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </dd>
    </dl>


 </div>

上記のようなdlをいくつか子要素に含むdivがあるとします、画面のサイズが小さくなると内側のdlを２列から１列に変更したいです。

内側のdlはさらに増える予定でして６個程を想定しています

行動規範の内容に同意します

回答1件

ベストアンサー

ヒント

css
1foo {display: flex}
2```下のリンク等を読んでflexの勉強をしましょう。
3[CSS3のFlexboxを基本から理解して、使い倒そう！](https://liginc.co.jp/web/html-css/css/21024)
4
5Media Queryについても調べて理解しておいた方が良いです。