リストを縦方向に並べて、一定位置で折り返して次の列に並べるという実装をしたいことがあったので、実装方法を考えてみました。
サンプルコード
以下のようなリストで試してみます。
1 2 3 4 5 6 | <ul class="sample"> <li><a href="">メニューA</a></li> <li><a href="">メニューB</a></li> 〜略〜 <li><a href="">メニューL</a></li></ul> |
まずはdisplay: flex;を使用する方法です。
1 2 3 4 5 6 | .sample { display: flex; flex-direction: column; /* 縦並びに変更 */ flex-wrap: wrap; /* 次の列に改行 */ height: 120px;} |
flex-direction: column;で縦並びにした上でheightを設定して、高さ一杯まで来たら次の列に改行されるようにflex-wrap: wrap;を設定しています。
display: flexのデモページ
注意点として、リスト全体に幅の設定がないと横幅いっぱいに広がります。
display: flex; ではなく display: inline-flex;にすることで、横幅いっぱいに広がらなくなります。
1 2 3 4 5 6 | .sample { display: inline-flex; flex-direction: column; flex-wrap: wrap; height: 120px;} |
次にdisplay: grid;を使用する方法です。
1 2 3 4 5 6 | .sample { display: grid; grid-auto-columns: max-content; grid-template-rows: repeat(5, 1fr); grid-auto-flow: column;} |
grid-auto-flow: column;で縦並びにしてgrid-template-rows: repeat(5, 1fr);で行の数(今回は5行)を設定、横幅いっぱいに広がらないようにgrid-auto-columns: max-content;を設定しています。
display: gridのデモページ
コメントが承認されるまで時間がかかります。