flex-growが1:2なら幅も1:2？余った幅の配分を作例で確かめよう

二つのFlexアイテムへflex-growを1と2にしたら、最終的な幅も1:2になると思った。けれど、flex-growが主に配るのは、基本の大きさを決めたあとに余る正の空間だよ。

今回は横方向のFlexに二つの箱を置き、どちらも基本の幅を80pxへそろえる。縮小や内容の最小幅の条件を混ぜず、配分だけを小さく見てみよう。

最初にある幅と、追加される幅

.row { display: flex; }
.item { flex-basis: 80px; flex-shrink: 0; min-width: 0; }
.first { flex-grow: 1; }
.second { flex-grow: 2; }

作例ではgapを0にし、box-sizingをborder-boxへそろえる。外側の内容幅が300pxなら、最初の80pxが二つで160px、余る幅は140pxになる。

この140pxを1:2へ分けるので、追加は約46.7pxと93.3px。最終幅は約126.7pxと173.3pxで、最終的な二つの幅そのものが1:2ではないんだ。

0:1へするとどうなる？

作例では、1:1、1:2、0:1を選べる。0:1なら、最初の箱は正の余白の配分を受けず80pxのまま、二つ目へ余りが配られる。

flex-growが0でも、元の80pxまで消えるわけではないよ。「追加を受けない」と「幅が0になる」を分けて読もう。

作例では実際の幅も見る

1. 1:1で、二つの箱の最終幅と追加分を見る。
2. 1:2へ変え、追加分の比率を確認する。
3. 0:1へ変え、最初の箱が80pxを保つか見る。
4. 「最初から試す」で1:1へ戻す。

作例の表示枠は画面に合わせて小さくなるので、スマホでは外側が300px未満になることもある。式へ使うのは、指定した希望幅ではなく、実際の内容幅だよ。

小数のピクセルは丸められる場合があるため、表示の末尾まで完全な比率になると期待しないでね。元の80pxと、あとから加わった分を分けるための測定だよ。

実際のレイアウトでは条件が増える

flex-basisがautoの場合、内容、width、最小幅なども関係する。今回の結果を、どんな文章や画像でも同じ幅になる規則として使わないようにしよう。

また、余りが負になる場面はflex-shrinkなどの検討になるし、growの合計が1未満の場合にも別の扱いがある。今回は合計が1以上の三つの条件と、正の余白へ絞っている。

全体の幅の比率が目的なら、別の指定も検討する

幅の比率を定めたいのか、内容を基に余白を分配したいのかで、適した構成が変わる。Flexの基本サイズや、Gridの列の指定も含めて目的に合わせよう。

編集部ではChromiumで三つの配分、基本幅・実測・追加分とリセットを確認した。配置の向きはFlexの主軸と交差軸、縮まない内容はFlexの最小幅も参考になるね。