【html&css実践 #8】cssフレックスボックスとは？とても便利なスタイルを解説！

今回は、cssフレックスボックスについて解説します。
cssフレックスボックスは、簡単に横並びにすることができ、さらにレスポンシブにも対応していて、とても便利です。
しかも簡単なので、身につけてコーディングスピードを上げよう！

YouTubeにもアップしていますので、見ていただけたら嬉しいです！

cssフレックスボックスとは？

冒頭でも触れていますが、cssフレックスボックスとは、要素を簡単に横並びにできるcssのスタイルです。
親要素に適用させれば、その中の子要素を横並びにすることができます。

さらに、レスポンシブにも対応していて、例えば、PCは3つ並び、スマホは2つ並びなど、ウィンドウサイズによってカラム数も変えることもできます。

以前は、floatで横並びにするのが主流でしたが、今はフレックスボックスが主流になっています。

cssフレックスボックスの使い方

それでは、cssフレックスボックスの使い方を解説します。
前回の#7で使ったhtmlの、横並びしている部分を使います。

<section id="bicycle">
    <h2>Bicycle</h2>
    <div class="list-flex">
        <div class="list-flex-child">
            <img src="img/bicycle1.jpeg" alt="">
            <h3>タイトルタイトル</h3>
            <p>テキストテキストテキストテキスト</p>
        </div>
        <div class="list-flex-child">
            <img src="img/bicycle2.jpeg" alt="">
            <h3>タイトルタイトル</h3>
            <p>テキストテキストテキストテキスト</p>
        </div>
        <div class="list-flex-child">
            <img src="img/bicycle3.jpeg" alt="">
            <h3>タイトルタイトル</h3>
            <p>テキストテキストテキストテキスト</p>
        </div>
    </div>
</section>

htmlは、「list-flex」のclassをつけたdivタグが親要素で、この中の「list-flex-child」が子要素になり、この部分を横並びにしたいとします。

次はcssです。

/*-------------------------------------------
リセット
-------------------------------------------*/
img {
    max-width: 100%;
}

/*-------------------------------------------
Bicycle
-------------------------------------------*/
#bicycle {
    max-width: 960px;
    margin: 0 auto 100px;
    text-align: center;
}
#bicycle h2 {
    display: inline-block;
    font-size: 30px;
    text-align: center;
    margin: 0 auto 60px;
    border-bottom: solid 1px #383e45;
}
.list-flex {
    display: flex;
}

フレックスボックスの前に、imgに適用させている「max-width: 100%;」ですが、このスタイルを適用させないと、本来の画像サイズで表示されてしまうので、記述しています。

あと、「#bicycle」に適用させているスタイルも、最大幅を指定して、センター合わせにしています。

フレックスボックスのスタイルは、親要素の「list-flex」に「display: flex;」と記述しています。
保存してブラウザで確認すると、横並びになっていると思います。

これだけで横並びにすることができます。

綺麗に整える

親要素に「display: flex;」を記述すれば、子要素を横並びにすることができますが、これだけだと画像がくっついてしまっていて見栄えが良くありません。

フレックスボックスには他にもスタイルが用意されているので、いくつかご紹介します。

.list-flex {
    display: flex;
    justify-content: space-between;
}
.list-flex-child {
    width: 32%;
}

「list-flex」に「justify-content: space-between;」、「list-flex-child」に「width: 32%;」を追加しました。
ブラウザで確認すると、良い感じにスペースができて綺麗にレイアウトされていると思います。

justify-content

justify-contentは、子要素の横並びの間隔を指定することができます。
「space-between」は、最大幅の中で均等に配置してくれます。
「center」もあり、「justify-content: center;」とすると、くっついてセンター合わせで配置します。

子要素のwidth

フレックスボックスは、子要素のwidth指定が重要になります。

子要素の「list-flex-child」に「width: 32%;」と記述することで、ひとつの子要素の幅を32%にすることができます。
今回の例だと子要素が3つなので、最大幅が100%として、スペースを考えて32%としています。

こうすることで、marginがなくても良い感じにスペースを入れることができます。

スマホで2つ並びにしてみる

スマホで3つ並びだと、サイズが小さくなって見にくくなってしまうので、2つ並びにしたいと思います。
以下のスタイルを追加します。

.list-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list-flex-child {
    width: 32%;
}

@media screen and (max-width:768px) {
    .list-flex-child {
       width: 48%;
    }
}

「list-flex」に「flex-wrap: wrap;」、メディアクエリで「list-flex-child」に「width: 48%;」を追加しました。
ブラウザでウィンドウサイズを縮めると、2つ並びに変わると思います。

flex-wrapは、要素を折り返すかどうかを指定することができます。
「flex-wrap: wrap;」とすると折り返しになり、「flex-wrap: nowrap;」とすると折り返さないようになります。

メディアクエリは、ウィンドウのサイズによってスタイルを適用させることができます。
この例だと、ウィンドウサイズが768px以下になったら、「list-flex-child」を「width: 48%;」にする、という記述になります。

このように、簡単にスタイルだけで色々なレイアウトを表現できることができます。

最後に

以上、cssフレックスボックスについて解説しました。

cssフレックスボックスは、本当に便利で、一回覚えてしまえば、複雑なレイアウトでも簡単に表現することが出来るようになりますので、しっかり身につけましょう。

次回は、少し触れたメディアクエリについて解説したいと思います。