【CSS】display flexの使い方｜HTML＆CSS入門講座（14）モダンウェブレイアウトにおけるFlexboxの役割と進化

下記のPodcastは、Geminiで作成しました。

ストーリーブック

「CSS display flexの使い方｜HTML＆CSS入門講座（14）」の絵本を見る

はじめに

ウェブデザインの歴史において、要素の配置（レイアウト）は常に開発者を悩ませる課題でした。かつてはテーブルタグを用いたレイアウトや、本来は画像とテキストの流し込みのための機能であった「float」プロパティを転用する手法が一般的でしたが、これらは構造が複雑になりやすく、保守性の低下を招いていました。こうした背景から、要素を柔軟（Flexible）に配置するために設計されたのが「Flexbox（Flexible Box Layout）」です。2025年現在、Flexboxはウェブ制作におけるレイアウト構築のデファクトスタンダードとして定着しています。特に、単一の方向（横一行、または縦一列）に要素を並べる際に、その真価を発揮します。最新のウェブ標準では、Flexboxは単なる配置ツールを超え、レスポンシブデザインの中核を担う知的なレイアウトエンジンへと進化を遂げています。Flexboxを導入する最大のメリットは、数行のコードを追加するだけで、従来では困難だった「要素の垂直中央揃え」や「コンテンツ量に応じた動的な幅の調整」が容易に実現できる点にあります。また、2026年に向けて普及が進んでいるコンテナクエリ（Container Queries）などの新技術とも高い親和性を持ち、コンポーネント単位での高度な自律的レイアウトが可能になっています。

フレックスボックスの基本構造：コンテナとアイテム

Flexboxを正しく理解するための第一歩は、その構造を「親要素」と「子要素」の二層で捉えることです。Flexboxでは、レイアウトを制御する箱そのものを「フレックスコンテナ（親要素）」、その中に配置される個々の要素を「フレックスアイテム（子要素）」と呼びます。

司令塔としてのフレックスコンテナ

コンテナに対して display: flex; を指定した瞬間、その直下にある子要素はすべて自動的にフレックスアイテムとしての特性を持ちます。この宣言により、コンテナ内には「主軸（Main Axis）」と、それに対して垂直に交わる「交差軸（Cross Axis）」という二つの仮想的な軸が生成されます。Flexboxのあらゆる配置制御は、この二つの軸を基準に行われます。

軸の概念と書き込みモード

Flexboxの挙動は、ドキュメントの「書き込みモード（Writing Mode）」に依存します。例えば、日本語や英語のような左から右へ読む言語では、主軸はデフォルトで左から右（インライン方向）へ向かいます。しかし、縦書きのドキュメントや、右から左へ読む言語（アラビア語など）では、主軸の方向もそれに合わせて自動的に変化します。この「論理的な方向性」こそが、従来の物理的な位置指定（left, topなど）にはなかったFlexboxの強力な柔軟性の源泉です。

親要素（コンテナ）に指定する主要プロパティ

フレックスコンテナに指定するプロパティは、アイテム全体の並び方や空間の配分、そして折り返しの有無などを決定します。

flex-direction：並べる方向と主軸の決定

flex-direction は、アイテムをどの方向に並べるか（主軸をどちらに向けるか）を指定します。

値	説明
row	デフォルト値。アイテムを水平方向に左から右へ並べます。
row-reverse	アイテムを水平方向に右から左へ（逆順に）並べます。
column	アイテムを垂直方向に上から下へ並べます。
column-reverse	アイテムを垂直方向に下から上へ（逆順に）並べます。

スマートフォン向けのレイアウトでは、PC版で横並び（row）だった要素を縦並び（column）に切り替える手法が頻繁に用いられます。

justify-content：主軸方向の整列と余白分配

アイテムが主軸方向に沿ってどのように配置されるかを制御します。特に、余ったスペースをどのように分配するかが重要です。

flex-start：デフォルト値。アイテムを主軸の開始位置に寄せて配置します。

flex-end：アイテムを主軸の終点に寄せて配置します。

center：アイテムを中央に配置します。

space-between：最初と最後のアイテムを両端に配置し、アイテム間に均等な余白を設けます。

space-around：各アイテム의周囲に均等な余白を設けます。

space-evenly：すべてのアイテム間および両端の余白を完全に均等にします。

align-items：交差軸方向の整列

アイテムを垂直方向（交差軸方向）のどの位置に揃えるかを決定します。

stretch：デフォルト値。アイテムをコンテナの高さ（または幅）いっぱいに引き伸ばします。これにより、中身の量が異なる隣接カラムの高さを揃えることが可能です。

flex-start：アイテムを交差軸の開始位置に揃えます。

center：アイテムを交差軸の中央に揃えます。ボタン内のテキストとアイコンを垂直中央に揃える際などに最適です。

flex-end：アイテムを交差軸の終点に揃えます。

baseline：アイテム内のテキストのベースライン（文字の底辺）に合わせて整列させます。

flex-wrap：複数行への折り返し

デフォルトでは、コンテナ内のアイテムは無理やり一行に収まろうとします。これを制御するのが flex-wrap です。

nowrap：デフォルト値。折り返しをせず、コンテナの幅を超えても一行に並べます。

wrap：コンテナの幅が足りない場合に、アイテムを次の行へ折り返します。

gap：アイテム間のモダンな余白管理

2025年現在、最も推奨される余白の設定方法は gap プロパティの使用です。従来のように margin を各アイテムに指定し、最後の要素だけ margin-right: 0; にするといった複雑な指定は不要になりました。

プロパティ	指定対象	効果
gap	親要素	行間・列間の両方に余白を設定
row-gap	親要素	アイテム間の行（上下）の余白を設定
column-gap	親要素	アイテム間の列（左右）の余白を設定

gap は「要素と要素の間」にのみ余白を作るため、レイアウトが崩れにくく、メンテナンス性が非常に高いのが特徴です。

子要素（アイテム）に指定する個別プロパティ

コンテナの設定が全体の「ルール」であるのに対し、アイテムへの指定はその要素自身の「振る舞い」を定義します。

flex-grow：余白の吸収と伸長

flex-grow は、コンテナ内に余剰スペースがある場合、その要素がどれだけの比率で伸びるかを数値で指定します。初期値は 0 であり、明示的に指定しない限り要素は伸びません。例えば、三つの要素にそれぞれ flex-grow: 1; を指定すると、余ったスペースが三等分され、すべての要素が均等にコンテナを埋め尽くします。

flex-shrink：不足時の圧縮比率

コンテナの幅が足りなくなった際、その要素がどれだけの比率で縮むかを決定します。初期値は 1 です。

flex-shrink: 1;：他の要素に合わせて縮小します。

flex-shrink: 0;：絶対に縮小させたくない要素（ロゴや固定サイズのアイコンなど）に使用します。

flex-basis：サイズの基準点

要素の伸び縮みが計算される前の「基本サイズ」を指定します。width プロパティに近い役割を果たしますが、Flexboxの計算式においては width よりも優先されます。初期値は auto（コンテンツのサイズ）です。

flexショートハンド：効率的な一括指定

実務では flex-grow, flex-shrink, flex-basis を個別に書くことは少なく、flex プロパティとして一行で記述することが推奨されます。flex: 1; は flex: 1 1 0; と同等であり、要素を柔軟に伸ばしつつ、ベースサイズを0として均等分配する際によく使われます。flex: 0 0 200px; は「伸びず、縮まず、常に200px」という固定幅を意味します。

高度なレイアウト調整と計算の理論

Flexboxの挙動を完全に制御するためには、ブラウザがどのようにサイズを計算しているかという理論を知ることが不可欠です。

自由空間（Free Space）の分配アルゴリズム

Flexbox의 サイズ決定は、以下のプロセスで行われます。まず、全アイテムの flex-basis（基準サイズ）を合計します。コンテナの幅からその合計を引いた値が「自由空間」となります。この自由空間を、各アイテムの flex-grow の比率に応じて分配し、基準サイズに加算します。縮小時（flex-shrink）の計算はより複雑で、単なる比率だけでなく「要素の元のサイズ」も考慮されるため、大きな要素ほど多く縮むという直感的な挙動を示します。

order：視覚的な順序の制御

order プロパティを使用すると、HTMLの構造（DOM）を書き換えることなく、表示上の順番だけを入れ替えることができます。数値が小さいほど先に配置されます（負の数も可能）。デフォルト値は 0 です。この機能は非常に強力ですが、後述するアクセシビリティの観点から、慎重な使用が求められます。

2025年以降のレイアウト戦略：FlexboxとGridの併用

かつて「FlexboxとCSS Gridのどちらを使うべきか」という議論がありましたが、現代のウェブ開発においては「目的による使い分け」が正解です。

適切な技術の選択基準

レイアウトの性質	推奨される技術	理由
一次元（一行・一列）	Flexbox	要素を流動的に並べ、内容に合わせて伸縮させるのに最適。
二次元（縦横の整列）	CSS Grid	行と列のグリッドを定義し、複雑なエリア配置を行うのに適している。

例えば、ヘッダー内の「ロゴ、ナビゲーション、検索窓」の配置はFlexboxが適しており、ページ全体の「ヘッダー、メイン記事、サイドバー、フッター」という大きな枠組みにはCSS Gridが適しています。

アクセシビリティとユーザビリティへの配慮

高度なレイアウトを実現する際、開発者が最も注意しなければならないのが「情報のアクセシビリティ」です。

視覚的順序と論理的順序の乖離

order プロパティや flex-direction: row-reverse; を使用すると、画面上の見た目と、HTMLファイル内の記述順序が一致しなくなります。これは以下のユーザーにとって深刻な問題を引き起こす可能性があります。

スクリーンリーダー利用者：読み上げ順序はHTMLの記述順に従うため、画面上の見た目と異なる順番で情報を理解することになります。

キーボード利用者：Tabキーによるフォーカス移動もHTMLの記述順に従うため、画面上でバラバラな順序でフォーカスが飛ぶ現象が発生します。

開発における鉄則は、「重要な情報の順序はHTML構造で担保し、Flexboxによる順序変更は視覚的な微調整に留める」ことです。

フォームとレスポンシブデザインの整合性

問い合わせフォームなどの入力要素をFlexboxで配置する場合、ラベルと入力フィールドの関連性が視覚的に崩れないよう注意が必要です。画面幅が狭くなった際に、特定の項目だけ意図しない位置に移動してしまわないよう、コンテナの設定を慎重に行う必要があります。

今後の展望：2026年のCSSレイアウト

2026年に向けて、CSSはさらに進化を続けています。注目の新機能として、CSS内で条件分岐を可能にする if() 関数や、要素同士の相対的な位置関係を定義する「アンカーポジショニング（Anchor Positioning）」が挙げられます。また、コンテナクエリの普及により、ブラウザの画面サイズ（ビューポート）ではなく、親要素の幅に応じてFlexboxの並び方を柔軟に変える手法が一般化するでしょう。これにより、サイドバーにある時とメインエリアにある時で、自動的に最適なレイアウトに自己調整する「真にコンポーネント指向なデザイン」が実現します。

結論

display: flex; は、初心者にとって理解しやすい直感的な操作性を持ちながら、プロフェッショナルな要求にも応えられる奥深さを備えた技術です。その基本となる「コンテナとアイテムの関係」および「軸の概念」をマスターすることは、モダンなウェブ制作における最も価値のある投資の一つと言えるでしょう。本講座で解説したプロパティを組み合わせることで、もはや実現できないレイアウトはほとんどありません。ただし、その強力な機能を使う際には、常にアクセシビリティへの配慮を忘れず、すべてのユーザーにとって使いやすい設計を心がけてください。

参考資料

1. フレックスボックスの使い方を理解する、https://withcode.tech/media/flex_box_layout/

2. 初心者のためのCSS入門ガイド【2025年最新版】、https://yagi-system.com/css-beginner-guide-2025/

3. CSS Flexboxの基本、コンテナとアイテム、よく使うプロパティの解説、https://yagi-system.com/css-beginner-guide-2025/

4. CSS Flexbox MDN 日本語公式ドキュメント（flex）、https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/flex

5. CSS Flexbox MDN 日本語公式ドキュメント（用語集）、https://developer.mozilla.org/ja/docs/Glossary/Flexbox

6. flexboxの構造・基本知識、https://jp.ext.hp.com/techdevice/technologysc/creator_003/

7. Flexbox の基本的な使い方、https://nulab.com/ja/blog/nulab/css-basics-for-engineer-flexbox/

8. 2021年以降のFlexboxの作り方 - ICS MEDIA、https://ics.media/entry/210628/

9. flex-grow flex-shrink flex-basis 違い分かりやすく、https://miyattiblog.com/explanation-of-flex-property/

10. サイズ、拡大縮小を定義する「flex」、https://coliss.com/articles/build-websites/operation/css/even-more-about-how-flexbox-works.html

11. 比率や幅を制御するflexプロパティ、https://and-ha.com/coding/flex-short/

12. flexboxのgapプロパティの使い方、メリット、ブラウザ対応状況、https://ics.media/entry/210628/

13. 「フレックスボックス」の限界と注意点、https://withcode.tech/media/flex_box_layout/

14. flex-* の伸び縮み系を理解するぞ！、https://qiita.com/ktrk2002/items/cba355702847b0a8e2cb

15. flex-basisの性質とwidthとの比較、https://zero-plus.io/media/css-flex-basis-how-to-use/

16. Flexアイテムの挙動を決める3つのプロパティ、https://frontend-note.blog/flex/

17. flex-shrinkの計算の仕組みと再分配、https://memowomome.hatenablog.com/entry/2016/09/06/080000

18. ショートハンドプロパティのflexについて、https://note.com/nano_yoshizawa/n/na465a4f3bdf3

19. flex: 0 1 200px; の具体的な意味、https://note.com/nano_yoshizawa/n/na465a4f3bdf3

20. 基準となるサイズ flex-basis の詳細、https://frontend-note.blog/flex/

21. flex-grow を子要素に指定した際の余白分配、https://qiita.com/ktrk2002/items/cba355702847b0a8e2cb

22. アイテム幅の計算式（コンテンツ幅との合計）、https://parashuto.com/rriver/development/how-flex-item-width-is-calculated

23. CSS Flexbox アクセシビリティ注意点、https://fastcoding.jp/blog/all/info/accessibility-2/

24. CSSで要素の表示順を変えた際のアクセシビリティ上の注意、https://qiita.com/kabechiyo13/items/371f4ccb5426a7d14a75

25. 配置、位置揃え、アイテム間の自由余白の分配（MDN）、https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts

26. フォーカス可能な要素の順序変更とユーザビリティ（MDN）、https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox

27. 定番のフォームもFlexboxで作成する際の注意点、https://coosy.co.jp/blog/css-flexbox/

28. CSS 2025 最新トレンドとview-transitions、https://coosy.co.jp/blog/css-trend/

29. フレックスボックスの使い方を理解する（2025決定版）、https://withcode.tech/media/flex_box_layout/

30. CSS features 2026: if functions and corner shape、https://www.youtube.com/shorts/PXMRvANl-as

31. Container queries in 2026: Powerful, but not a silver bullet、https://blog.logrocket.com/container-queries-2026/

32. Enter Flexbox: The Layout Revolution (Elementor)、https://elementor.com/blog/flex-css/

33. CSS box alignment module: In flexbox (MDN)、https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_alignment/In_flexbox

34. The align-items property controls (MDN)、https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox

35. A Beginner's Guide To Flexbox CSS Properties (2025)、https://www.elegantthemes.com/blog/design/a-beginners-guide-to-flexbox-css-properties

36. Modern CSS Features You Need to Know in 2025、https://www.geeksforgeeks.org/css/modern-css-features-you-need-to-know-in-2024/