【HTML&CSS】Flexboxで2行のリストを簡単に作成する方法！

こんにちはHTML&CSS初心者のhimakuroです。

今回の記事はFlexboxで2行のリストを作成する方法！を書いて行きます。

Flexboxを使えば大抵のデザインは作れるようになるので、デザイン出来る幅を広げて行きましょう。

今回作るリストの見た目

カテゴリーやメニューなどでよくあるシンプルなデザインですね。

使い勝手が良いので、是非これを機会に作れるようになっておきましょう。

リストを作る

まずは ul とli を活用してリストを作成します

index.html

<div class="category-wrapper">
  <ul class="category-list">
    <li class="category">カテゴリ1</li>
    <li class="category">カテゴリ2</li>
    <li class="category">カテゴリ3</li>
    <li class="category">カテゴリ4</li>
    <li class="category">カテゴリ5</li>
    <li class="category">カテゴリ6</li>
    <li class="category">カテゴリ7</li>
    <li class="category">カテゴリ8</li>
  </ul>
</div>

このようなリストが画面に出てきたらOKです。

Flexboxを活用してリストを横並びにして整える

続いて display: flex を使い、横並びにしていきます。

また今回は1行に4つカテゴリを配置する予定なので、左右の余白も考慮しつつ width: 24% で指定をしていきます。

style.css

.category-list {
    display: flex;
}

.category {
    width: 24%;
}

width: 24% を指定したのにも関わらず、幅が4等分にされず1行に並びますが一旦はOKです

flex-wrapで複数行に対応させる

flexboxを使う際に flex-wrap を指定する事で複数行にすることが出来ます。

デフォルトではこれが no-wrap になっているため、折りたたみが無効化されて1行に収まるように調整されてしまいます。

style.css

.category-list {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.category-list の内容を上記に変更し、リストが2行になり文字が各リスト要素の中央に来るかを確認しましょう。

余白の調整を行なう

続いて余白をいい感じに調整していきます。

この作業を行なう際には、背景色を指定して各要素の範囲を可視化する事をおすすめします。

具体的には .category のスタイルとして背景色を追加します。 今回は分かりやすいように水色(skyblue)を指定しました。

style.css

.category {
    background-color: skyblue;
    width: 24%;
}

水色の背景が付き、各要素の範囲が把握出来るようになればOKです。

今回は各リストの左右に若干の余白を設けるために width: 24% を指定しました。

そして背景を水色にしたことにより、その余白が右に来てしまっていることがわかります。

そこで .category-list に justify-content: space-between; を追加しましょう。 style.css

.category-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

これを追加することにより、リスト要素全体が横幅をフルに使うようになり、リスト間に左右の余白が生まれます。

あとは上下の余白が欲しいので、 margin を使い調整を行います。

style.css

.category {
    background-color: skyblue;
    width: 24%;
    margin: 10px 0px;
}

余白の調整はこれで完了です。

リストの見た目を調整する

現状のままでも良いですが、リストの文字が若干窮屈な状態になってしまっているので最終調整を行なっていきます。

内容としては padding と box-sizing を追加していきます。

style.css

.category {
    background-color: skyblue;
    width: 24%;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px 0px;
}

paddingを追加することにより、リストを拡大しました。

そしてこのようなpaddingを追加すると、その分横幅も追加されるのでリストが崩れてしまうことがあります。

そこでその現象を防ぐために box-sizing: border-box を追加しています。

border-box を追加することで、padding や margin も加味した上で幅を確保してくれるようになります。

これら2つのスタイルを追加することで、この様に窮屈さも解消されたリストの完成です！

flexboxを活用する際には box-sizing は使う機会が多いと思うので是非覚えておきましょう。