CSSフレックスボックス入門｜flex-growで自動伸縮して余白を調整する方法を初心者向けに解説
生徒
「横並びのレイアウトで、余ったスペースが中途半端に空いてしまいます。きれいに調整できますか？」
先生
「フレックスボックスの自動伸縮を使うと、余白をうまく埋められます。」
生徒
「画面サイズが変わっても大丈夫ですか？」
先生
「flex-growを使えば、画面に合わせて自然に広がります。」
1. フレックスボックスで余白ができる理由
CSSフレックスボックスで横並びのレイアウトを作ると、 要素の幅を指定していない場合、内容の大きさだけで表示されます。 その結果、右側や中央に余白が残ることがあります。
初心者の方は、この余白を見て失敗だと感じるかもしれませんが、 実はCSSが正しく動いている状態です。 この余白をどう使うかを決めるのがflex-growの役割です。
2. flex-growとは何か
flex-growは、余っているスペースをどれくらい広げて使うかを決めるCSSの設定です。 数字を使って指定し、数字が大きいほど多くのスペースを受け取ります。
例えるなら、ケーキを人数で分けるようなものです。 同じ数字なら同じ大きさ、数字が大きい人は多めにもらえます。 これを画面の余白に対して行うのがflex-growです。
3. 基本的なflex-growの使い方
flex-growは、フレックスボックスの中の子要素に指定します。 親要素には、displayでフレックスボックスを設定しておく必要があります。
<style>
.container {
display: flex;
background: #eee;
}
.box {
padding: 16px;
background: #ccc;
margin: 4px;
}
.grow {
flex-grow: 1;
background: #a0d8ef;
}
</style>
<div class="container">
<div class="box">固定サイズ</div>
<div class="box grow">自動で広がる</div>
</div>
この例では、growクラスを持つ要素だけが余白を受け取り、 横に大きく広がります。 他の要素は必要な分だけ表示されます。
4. 数字を変えて伸び方を調整する
flex-growの数字を変えることで、伸びる割合を調整できます。 例えば、一方を1、もう一方を2にすると、 余白は一対二の割合で分配されます。
これは、横幅を計算する必要がないため、 プログラミング未経験の方でも扱いやすい特徴です。 画面サイズが変わっても自動で調整されます。
5. よく使われる実際の場面
flex-growは、ナビゲーションメニュー、検索フォーム、カードレイアウトなどでよく使われます。 特に、中央だけを広げたい場合や、 ボタンの位置を自然にそろえたいときに便利です。
余白を無理にマージンで調整するより、 フレックスボックスの自動伸縮を使うことで、 シンプルで壊れにくいレイアウトが作れます。
6. 初心者がつまずきやすいポイント
flex-growが効かない場合、多くは親要素にフレックスボックスが設定されていません。 displayが正しく指定されているかを確認しましょう。
また、数値は相対的な割合なので、 必ずしも実際の幅をそのまま表すわけではありません。 この考え方に慣れると、レイアウトが一気に楽になります。
