リストの縦並びで2列にする
| HTML/CSS/PHP2列にするときって普通にすると
flexとかflowとか使って、2列にするんですが
それだと
- list01 - list02
- list03 - list04
- list05
って感じに横になるんですがね。
そうじゃなくて今回は
- list01 - list04
- list02 - list05
- list03
こういう感じにしたいのです。
ってことで簡単に、
/// HTML
<ul>
<li>list 01</li>
<li>list 02</li>
<li>list 03</li>
<li>list 04</li>
<li>list 05</li>
</ul>
HTMLはこんな感じ
ul{
column-count: 2;
}
cssはこんな感じです。
でもね、これだと左3右2とかで数があってないと
左右が縦センターに揃っちゃうんですよね。
面がずれるんです。
li{
display: inline-block;
}
なので中のに上記を追加したら面そろいます。
ってなわけでいちいち枠で囲って並べたりしなくてもよくなりました。
すごくありがたいですね!
あと、カラム間の距離は
ul{
column-count: 2;
column-gap: 10px;
}
って感じで、「column-gap」でできます。
以前記事を書いたのですが、こっちのがわかりやすくかけたと思うのでこっち残しにします。
一応、flexとか使ってもできますが、それだと高さを指定しないとだめなので、
中身(数)が増えたり、2行になったりとかね、そういうので使えない※ので
上記が一番フレキシブルにつかえると思います。
※ JSとか使ったらいけるんだろうけど面倒なのでしないです