先生と生徒の会話形式で理解しよう

生徒

「CSSのフレックスボックスで、flexっていうプロパティを見たんですが、どう使うんですか？」

先生

「flexは、フレックスボックスのアイテムの大きさを決める大事な設定で、ショートハンドという短い書き方もありますよ。」

生徒

「ショートハンドってなんですか？初心者でも使えますか？」

先生

「もちろん使えますよ。難しく見えても、一つずつ理解すればとても便利です。一緒にゆっくり見ていきましょう。」

1. フレックスボックスで使うflexプロパティとは？

CSSのフレックスボックスは、要素を横並びや縦並びに整列させるレイアウト方法です。その中でも、アイテムの伸び縮みを決めるのがflexプロパティです。フレックスボックスを使うことで、画面の幅が変わってもバランス良く並ぶデザインが簡単につくれます。

2. flexの三つの値「flex-grow」「flex-shrink」「flex-basis」

flexプロパティは、本来三つの値を組み合わせたものです。初めて聞くとわかりにくいので、例えを使って説明します。三つの値は次の通りです。

flex-grow：余ったスペースをどれだけ“もらうか”を決めるルール
flex-shrink：スペースが足りないときにどれだけ“縮むか”のルール
flex-basis：アイテムの基本の大きさ（pxや%で指定）

たとえば、机の上に物を置くときに「広い机だから少し広く置こう」と考えることがありますよね。その感覚に近く、フレックスボックスではアイテムがスペースに応じて伸び縮みします。

3. ショートハンド指定「flex: 1 0 auto」の意味を理解しよう

flexプロパティは、「flex-grow」「flex-shrink」「flex-basis」の三つをまとめて書くことができます。これをショートハンドと呼びます。有名な書き方が次のものです。


<div class="item" style="flex: 1 0 auto;">サンプル</div>

ブラウザ表示

この「flex: 1 0 auto」は、次のような意味になります。

1：余ったスペースを1の割合で広がる
0：縮む必要があるときは縮まない
auto：基本のサイズを自動に任せる

つまり、必要があれば広がるけど、基本のサイズは「内容に合わせて」決まる、そんな柔軟な設定です。

4. 初心者にも理解しやすいflex値の実例を見てみよう

ここでは、フレックスボックスの親要素を作り、その中に子要素を並べた例を紹介します。同じ幅ではなく、flexの値によって伸び方が変わることを確認できます。


<style>
    .container {
        display: flex;
        gap: 10px;
    }
    .box1 {
        flex: 1 0 auto;
        background: #b4d6ff;
        padding: 10px;
    }
    .box2 {
        flex: 2 1 100px;
        background: #ffd4b4;
        padding: 10px;
    }
    .box3 {
        flex: 0 1 150px;
        background: #d4ffb4;
        padding: 10px;
    }
</style>

<div class="container">
    <div class="box1">flex:1 0 auto</div>
    <div class="box2">flex:2 1 100px</div>
    <div class="box3">flex:0 1 150px</div>
</div>

ブラウザ表示

このように、flexプロパティを使うことで、三つのボックスが違った伸び方や縮み方をします。画面の幅が変わるとバランスも変わるので、レイアウトの幅がグッと広がります。