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が正しく指定されているかを確認しましょう。
また、数値は相対的な割合なので、 必ずしも実際の幅をそのまま表すわけではありません。 この考え方に慣れると、レイアウトが一気に楽になります。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
