【CSS】箇条書きリストを横並びにするにはdisplay:flex;を使う！

2019年9月20日 2020年12月10日

箇条書きリスト（ulタグ）は通常は縦に並ぶ。

箇条書きを超シンプルなコードで書くと下記のようになる

<ul>
      <li>さる</li>
      <li>とり</li>
      <li>いぬ</li>
</ul>

<ul>

</ul>

表示結果↓

この箇条書きを横に並ばせたい場合はdisplay：flexが非常に便利だ。

CSSファイルに↓のように記載する

ul{
    display:flex;
}
li{
    flex:1;
}

ul{

display:flex;

}

li{

flex:1;

}

そうすると↓のように表示される

箇条書きが横になって、幅いっぱいに３つの箇条書きリストが均等に広がった。

ちなみにflex:1はそれぞれ1:1:1の比率で幅を取るってこと。

だから、この比率を 1:1:3 とかにも出来るみたいだ。

カテゴリー