前回の通常フローから、横並びへ
前回のG-07では、要素が書いた順に上から下へ自然に積まれる通常フローと、そこから浮かせるpositionの話をしました。通常フローは縦積みが基本のため、複数の要素を横に並べて整えたい場面では、別の道具が必要になります。その現代の標準がFlexboxです。この講義では、Flexboxがどこに指定され、何を制御するのかを押さえます。バイブコーディングでAIが書くレイアウトの多くは、この仕組みで組まれているため、読めること自体が確認の力になります。
このスライドのポイント
- G-07: 要素が上から下へ自然に積まれる通常フロー、そこから浮かせるposition
- 通常フローは縦積みが基本 → 「横に並べて整える」には別の道具が要る
- その現代の標準がFlexbox。この講義の役割は「どこに指定し・何を制御するか」を押さえること
Flexboxの定義——親に指定し、子が並ぶ
Flexboxとは、親要素にディスプレイ・フレックスという指定を書き、その中の子要素たちを一次元、つまり横一列または縦一列に並べて、間隔・整列・伸縮を制御する仕組みです。ここで最も大切なのは役割分担です。指定を書くのは親要素、実際に並ぶのは子要素、という関係が核心になります。子を一つずつ動かすのではなく、親に「こう並べてほしい」と伝えると、中の子がまとめて整う、と捉えてください。並ぶ方向が一次元である点も、次回学ぶGridとの違いとして覚えておきます。
このスライドのポイント
- Flexbox＝親要素に display: flex を指定し、子要素たちを一次元（横一列または縦一列）に並べて、間隔・整列・伸縮を制御する仕組み
- 役割分担が核心: 指定を書くのは親、実際に並ぶのは子
- 一次元（一列）である点が、次回のGrid（二次元）との違い
なぜ必要か——読めないとコードで迷子になる
この仕組みを知らないと、AIが生成したレイアウトのコードの大半が読めなくなります。ヘッダーの左右振り分け、ボタンの横並び、カードの一覧など、実務の画面はほとんどFlexboxで組まれているからです。とくに迷いやすいのが、「なぜ子ではなく親にコードが書かれているのか」という点です。この構図を知らないまま子要素の側を探しても、整列を決めている指定は見つかりません。逆に、親に指定があると分かっていれば、並びが崩れたときにどこを直せばよいか、見当がつくようになります。
このスライドのポイント
- 実務の画面（ヘッダー、ボタン列、カード一覧）はほとんどFlexboxで組まれている
- 知らないと: AIが生成したレイアウトの大半が読めない
- とくに迷う点「なぜ子ではなく親にコードがあるのか」——この構図を知らないと直す場所を探せない
構造——制御の3点セット
構造を図で捉えます。親という一つの箱の中に、子が横に並ぶ姿が基本形です。制御の中心は三つあります。一つ目は、並ぶ方向にどう配置するかを決めるジャスティファイ・コンテント。二つ目は、その方向と直交する向きの揃えを決めるアライン・アイテムズ。三つ目は、子同士の間隔を決めるギャップです。この三点セットを押さえるだけで、実務で出会う整列の大半は説明できます。細かなプロパティを全部覚える必要はなく、まずこの三つの役割の区別が土台です。
このスライドのポイント
- 基本形: 親という1つの箱の中に、子が横に並ぶ
- 制御の中心3つ:
処理の流れ——ヘッダーの左右振り分け
画面ヘッダーで、左にタイトル、右に操作ボタンを置きたい場面はよくあります。従来のやり方では、間の余白を手作業で数値調整しがちでした。Flexboxなら、ジャスティファイ・コンテントをスペース・ビトウィーンにする一行で、子が両端へ振り分けられます。間の余白はブラウザが自動で計算するため、手で数値を合わせる必要がありません。タイトルとボタンの高さがずれる場合は、アライン・アイテムズで縦中央に揃えます。整列の意図を指定名でそのまま表せるのが、この道具の強みです。
このスライドのポイント
- よくある場面: 画面ヘッダーで左にタイトル、右にボタンを置く
- 従来は余白を手作業で調整しがち → Flexboxなら justify-content: space-between の一行で両端に振り分く
- 間の余白は自動計算。高さのずれは align-items で中央に揃える
技術サンプル——ヘッダーのFlex指定
サンプルを読みます。種別はコード、目的はヘッダーの横並びと整列を親の一か所で決めることです。注目してほしい点は二つあります。一つ目は、指定がすべて親であるドット・ヘッダーに書かれていて、子はそれに従って並ぶことです。二つ目は、たった三つのプロパティで、両端への配置・縦中央の揃え・子同士の間隔が、すべて片づいていることです。並びを確かめたいときは、AIへ「この横並びはFlexboxですか、親要素はどれで、どの指定が効いていますか」と聞くと、構造を言葉で確認できます。
このスライドのポイント
- 種別: code
- 目的: ヘッダーの横並び・両端配置・縦中央揃え・間隔を、親1か所で決める
- サンプル本体:
混同しやすい概念——親の流儀か、手作業の流儀か
混同しやすいのは、親に指定するFlexの流儀と、子を一つずつ動かす手作業の流儀です。同じ横並びに見えても、手作業の流儀では子要素それぞれにマージンを足して位置を調整していきます。これは一見きちんと動きますが、要素が増えるたびに崩れやすく、直す場所も画面のあちこちに散らばります。子をマージンで個別に動かし始めたら、それを親のFlex指定に一つにまとめられないかを疑うのが目安です。並びの意図は、親に一か所で書いたほうが読みやすくなります。
このスライドのポイント
- 「親に指定（Flexの流儀）」vs「子に個別指定（手作業の流儀）」
- 手作業の流儀: 子それぞれにmarginを足して位置を調整 → 一見動くが、要素が増えると崩れやすく直す場所も散らばる
- 目安: 子をmarginで1個ずつ動かし始めたら、親のFlex指定にまとめられないか設計を疑う
バイブコーディングでの確認点
バイブコーディングでの確認点です。「並びが崩れた」という相談では、まず親要素のflex指定をAIに確認させます。子の側への場当たり的な修正を積み重ねると、原因がどこにあるのか追えなくなってしまうためです。具体的な質問例はこうです。「この横並びはFlexboxですか。親要素はどれで、どの指定が効いていますか」。親を先に押さえる癖をつけると、AIの直しが正しい場所に入っているかを、自分で判断できるようになります。
このスライドのポイント
- 「並びが崩れた」相談では、まず親要素のflex指定をAIに確認させる
- 子への場当たり修正を積み重ねると、原因が追えなくなる
- AIへの質問例: 「この横並びはFlexboxですか。親要素はどれで、どの指定が効いていますか」
まとめと次回——二次元のGridへ
一問一答です。Flexboxで並べる指定を書くのは、親と子のどちらでしょうか。……答えは親です。ディスプレイ・フレックスは親要素に書き、子はそれに従って並びます。三十秒まとめとして、Flexboxは一次元の整列道具であり、指定は親に書き、ジャスティファイ・コンテント・アライン・アイテムズ・ギャップの三つで大半が済む、と覚えてください。次回のG-09では、行と列の二次元で画面全体の骨組みを組むGridへ進みます。関連資料は「UI改善プロンプト50」と「SaaS画面パターン100」です。
このスライドのポイント
- 一問一答: 「Flexboxで並べる指定を書くのは親と子のどちら？」→ 答: 親（display: flex を親に）
- 30秒まとめ: Flexboxは一次元の整列道具。親に指定し、justify-content・align-items・gap の3つで大半が済む
- 次回: G-09 行と列の二次元で画面全体を組むGridへ
- 関連資料: 「UI改善プロンプト50」「SaaS画面パターン100」
