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

生徒

「CSSのフレックスボックスを使うときに、flex-growとかflex-shrinkとかよく見るんですが、どう使えばよいのか分からないです。」

先生

「フレックスボックスの中でも、この3つはとても重要な性質で、レイアウトを自由に整えたいときに役立ちますよ。」

生徒

「基本からゆっくり知りたいです。そもそも何をするための設定なんですか？」

先生

「それでは、初心者でも理解しやすいように、例え話をまじえながら仕組みを見ていきましょう。」

1. フレックスボックスとは何かを簡単におさらい

フレックスボックスは、CSSで横並びや縦並びを簡単に整えるためのレイアウト方法です。今までのレイアウトは、浮動の指定や複雑な位置調整が必要で、初心者には理解しにくいものでした。しかしフレックスボックスを使うと、項目の並び方や大きさの伸び縮みを自然に調整できるようになり、ウェブサイト制作がとても楽になります。

例えば、メニューを横に並べたいときや、カード型の要素をきれいにそろえたいときに役立ちます。フレックスボックスは、コンテナの中の子要素を自動で整列してくれる仕組みを持っています。このとき、各要素がどう伸びたり縮んだりするかを決めるのが、flex-grow、flex-shrink、flex-basisという3つの設定です。

2. flex-growとは？余ったスペースをどれだけ広げるかの設定

flex-growは、簡単に言うと「余ったスペースをどれだけ分けてもらえるか」を決める数値です。たとえば、机に3人が紙を広げて作業する場面を想像してください。机の余白が残っているときに、「私は広く使いたい」「私は少なくていい」と希望が分かれることがあります。この希望の大きさがflex-growの役割です。

数値が大きいほど、その要素がたくさんのスペースを広げて使います。逆に0を入れると、まったく広がりません。ウェブページで横幅を調整したいときに、自然な伸び方を設定できる便利な性質です。


<style>
    .box {
        display: flex;
        gap: 10px;
    }
    .item1 {
        flex-grow: 1;
        background: skyblue;
    }
    .item2 {
        flex-grow: 2;
        background: lightgreen;
    }
</style>

<div class="box">
    <div class="item1">A</div>
    <div class="item2">B</div>
</div>

ブラウザ表示

3. flex-shrinkとは？狭いスペースのときに縮む力を設定

画面が小さくなったり、要素の数が増えたりすると、横に並んだ要素の幅が足りなくなることがあります。そのときに「どれくらい小さくなるか」を調整するのがflex-shrinkです。

身近な例で言えば、電車に座るときにスペースが狭くなると少し体を寄せますよね。それが縮む力、つまりflex-shrinkです。数値が大きいほど、たくさん縮んで他の要素にスペースをゆずるようになります。


<style>
    .box2 {
        display: flex;
        width: 200px;
        gap: 10px;
    }
    .itemA {
        flex-shrink: 1;
        background: orange;
    }
    .itemB {
        flex-shrink: 3;
        background: pink;
    }
</style>

<div class="box2">
    <div class="itemA">A</div>
    <div class="itemB">B</div>
</div>

ブラウザ表示

4. flex-basisとは？要素のスタート時点のサイズを決める

flex-basisは、最初にどれくらいの大きさを持たせるかを指定する性質です。これは「初期幅」だと思うと分かりやすいでしょう。flex-growがスペースを広げる力、flex-shrinkが縮む力だとすると、flex-basisはそのベースとなる寸法を決めているのです。

家を建てるとき、最初に間取りを決めますよね。それがflex-basisです。そこから広がったり縮まったりしながら調整されていきます。


<style>
    .box3 {
        display: flex;
        gap: 10px;
    }
    .itemX {
        flex-basis: 150px;
        background: lightcoral;
    }
    .itemY {
        flex-basis: 80px;
        background: lightyellow;
    }
</style>

<div class="box3">
    <div class="itemX">X</div>
    <div class="itemY">Y</div>
</div>

ブラウザ表示

5. flexプロパティをまとめて書く方法

flex-grow、flex-shrink、flex-basisは別々に書くこともできますが、まとめて書くこともできます。まとめて書いたほうがコードが短くなり、見やすくなります。

書く順番は、grow、shrink、basis の順です。例えば、flex: 1 0 200px と書くと、余白を伸ばす力が1、縮む力が0、スタートの幅が200pxという意味になります。


<style>
    .box4 {
        display: flex;
        gap: 10px;
    }
    .itemM {
        flex: 1 0 120px;
        background: lightblue;
    }
    .itemN {
        flex: 2 1 80px;
        background: lightgreen;
    }
</style>

<div class="box4">
    <div class="itemM">M</div>
    <div class="itemN">N</div>
</div>

ブラウザ表示

6. 3つの使い分けをイメージで整理しよう

3つの性質をまとめると、flex-growは伸びる力、flex-shrinkは縮む力、flex-basisは最初の幅を示しています。それぞれが協力しながら一つの要素の大きさを決めています。例えば、flex-basisで最初の幅を決め、ページに余白があればflex-growで伸び、逆に狭くなればflex-shrinkでギュッと縮まるという流れです。こうした仕組みを理解しておくと、ネットショップの商品一覧や写真ギャラリーなど、整った配置が必要な場面で非常に役立ちます。

フレックスボックスはとても強力で、現代のウェブデザインで欠かせない存在です。初心者のうちに使い方をくり返し練習して、自然と使いこなせるようになると、ページ制作の幅が広がります。ウェブサイト作りの基礎であるレイアウトの仕組みを知っておくと、後のデザイン作成や配置調整でも困ることが少なくなります。