Flexboxの応用(折り返し・伸縮)

このレッスンでは、Flexboxの応用としてflex-wrapとflex-growの使い方を学び、より柔軟なレイアウトを組めるようになることを目標にします。「CSS flex-wrap 使い方」で調べている方向けです。

flex-wrap: wrapを指定すると、横並びの要素が入りきらないときに自動で折り返されます。flex-growを使うと、余ったスペースを要素ごとに伸縮させて分配できます。

サンプルコードでは、.box-rowにflex-wrap: wrap;を指定し、.growクラスの要素だけにflex-grow: 1;を追加しています。固定幅の要素はそのままの大きさを保ちつつ、grow指定した要素だけが余ったスペースを埋めるように伸びる様子を確認してみましょう。

初心者がよくつまずくのが、flex-wrapを指定しないと、要素が画面幅からはみ出しても折り返されず、横スクロールが発生してしまう点です。レスポンシブなレイアウトを作りたい場合は、この指定を忘れないようにしましょう。

商品一覧のカードを画面幅いっぱいに敷き詰め、入りきらない分は自動で次の行に送りたい、といった場面でよく使う組み合わせです。スマホでもパソコンでも崩れにくい、実用的なレイアウトを組み立てられます。