ＣＳＳで、いくつかわからない<li>を、自動で伸縮させて綺麗に並べるコード

Question

<li>のリストを並べるときに、いくつ出力されても綺麗に並ぶＣＳＳを知りたいです。

リストの数は１個から１０個で、最大で２行５列にしたく、こんな感じのHTMLです。

<div style="width:250px;height:100px;">
    <ul>
        <li>１</li>
        <li>２</li>
        <li>３</li>
        <!-- いくつかわからない -->
    </ul>
</div>

このように、リストを囲む全体のdivは横250✕縦100までで、リスト数とサイズの出力パターンとしては例えば下記のようなものです。

・リストが１つなら、
横250✕縦50のリストを１つ

・リストが２つなら、
125✕50のリストを２つ

・リストが５つなら、
50✕50ののリストを５つ

・リストが６つなら、
50✕50ののリスト５つと
250✕50のリストを１つ

・リストが８つなら、
50✕50ののリストを５つと、
83.3✕50ののリストを３つ

flexboxを使えばできるとのことですが、実際のコードはどのようになりますでしょうか？

Comments

[akihiro3]

え！？確か質問はflexboxで出来るのか。それともgrid layoutで出来るのか。を聞いてましたよね？間違いない回答をしたつもりですが無視ですか。そして質問内容の肝心な所の記述も消されては私が見当違いな回答してるとしか見えないのですけど。まあ、質問編集は構いませんが、ご自身で試されたコードも見せずに丸投げの質問をするのって、どれだけ失礼なのですか。

Answer 1

flexboxで出来ますよ

質問編集後の追記です

• ulをflexboxにして、子要素が範囲を超えると改行するようにしてください
• liは制限を付けた可変する幅を指定し、範囲いっぱいになるようにしてください

プロパティと値は調べてください

試して出来なかった場合は、試したコードを質問文に追加して、コメントください。