しかし、実際にレイアウトを組もうとすると、
次のような悩みが出てきます。

・要素を横に並べたいだけなのにCSSが複雑になる
・中央揃えが思った以上に難しい
・間隔を均等にしたいが計算が面倒

こうした問題を一気に解決してくれるのが、
Flexbox（フレックスボックス） です。

この記事では、
Flexboxの考え方と最低限覚えるプロパティ に絞って、
初心者向けに解説します。

この記事で学べること

・Flexboxとは何か
・Flexboxの基本的な考え方
・コンテナとアイテムの関係
・よく使うFlexboxプロパティ
・Flexboxでできること

Flexboxとは何か

Flexboxとは、
要素を柔軟に並べるためのCSSレイアウト手法です。

従来のレイアウトでは、

・float
・position
・inline-block

などを組み合わせる必要がありましたが、
Flexboxを使うことで、
これらを シンプルな指定 で実現できます。

Flexboxの基本構造

Flexboxには、
明確な役割分担があります。

・flexコンテナ
・flexアイテム

まず、この関係を理解することが重要です。

flexコンテナとは

flexコンテナとは、
Flexboxを適用する親要素です。

この要素に
display を指定することで、
中の要素の並び方を制御します。

flexアイテムとは

flexアイテムとは、
flexコンテナの直下にある子要素です。

Flexboxの指定は、
基本的にこの子要素に影響します。

Flexboxを有効にする

Flexboxを使うために必要なのは、
たった1つの指定です。

親要素を
フレックスコンテナにする
という意識を持ちましょう。

横並びが一瞬でできる理由

Flexboxを使うと、
ブロック要素でも
簡単に横並びになります。

これは、
Flexboxが
「並べ方を管理する仕組み」
だからです。

divが横に並ばない問題は、
Flexboxでほぼ解決します。

主軸と交差軸の考え方

Flexboxを理解するうえで、
重要な概念があります。

それが、

・主軸
・交差軸

です。

主軸とは

主軸とは、
要素が並ぶ方向です。

初期状態では、
左から右へ並びます。

交差軸とは

交差軸は、
主軸に対して直角の方向です。

縦方向の揃えは、
この交差軸で考えます。

justify-content（主軸の揃え）

justify-contentは、
主軸方向の揃え方を指定します。

よく使われる考え方は次のとおりです。

・左寄せ
・中央寄せ
・右寄せ
・均等配置

「横方向の配置」と思って問題ありません。

align-items（交差軸の揃え）

align-itemsは、
交差軸方向の揃え方を指定します。

よくある使いどころは、

・縦方向の中央揃え
・高さが違う要素の揃え

Flexboxで
縦中央揃えが簡単になる理由は、
このプロパティにあります。

Flexboxでできることまとめ

Flexboxを使うと、
次のようなことが簡単にできます。

・横並びレイアウト
・中央揃え（縦・横）
・間隔の均等配置
・高さが違う要素の整列

これらは、
実務で非常によく使われます。

初心者が最初に覚えるべきポイント

Flexboxは多機能ですが、
最初は次の点だけ覚えれば十分です。

・親要素に Flexbox を指定する
・主軸と交差軸を意識する
・justify-content と align-items

これだけで、
多くのレイアウトが組めるようになります。

display / position との関係

Flexboxは、
display や position の代替ではありません。

・display：並び方の基本
・position：位置調整
・Flexbox：柔軟な並び制御

用途ごとに
使い分けることが大切です。

なぜFlexboxが重要なのか

現代のWeb制作では、
Flexboxは 標準スキル です。

・管理画面
・カードレイアウト
・ヘッダーやフッター

ほぼすべての場面で使われます。

ここで基礎を押さえておくことで、
後の学習が非常に楽になります。

まとめ

Flexboxは、
CSSレイアウトを劇的に簡単にする仕組みです。

・親要素がコンテナ
・子要素がアイテム
・主軸と交差軸で考える

この3点を理解できれば、
Flexboxの基礎は十分です。

次は、
CSSで起きやすい崩れやトラブルの原因と切り分け方
を学び、CSS基礎を完成させます。

次に読むべき記事

▶ 次の記事
4-7 よくあるCSS崩れと原因の切り分け方

▶ 関連記事
4-5 レイアウトの基本（display / position）

次に出てくる疑問は、次のようなものです。

・要素を横に並べたい
・特定の位置に固定したい
・なぜ勝手に改行されるのか分からない

これらを制御するのが、
display と position です。

この記事では、
CSSレイアウトの基礎となる
display と position の考え方を整理します。

この記事で学べること

・displayとは何か
・ブロック要素とインライン要素
・positionの基本
・relative / absolute / fixed の違い
・レイアウトで迷わない考え方

displayとは何か

displayは、
要素の表示形式を決めるプロパティです。

「この要素は、
どんな並び方をするか」
を指定します。

HTMLタグには、
初期状態の display が決まっています。

ブロック要素とは

ブロック要素は、
縦に並ぶ要素です。

特徴
・横幅いっぱいに広がる
・前後で改行される

代表例
・div
・p
・h1〜h6

何も指定しなければ、
これらは縦に積み重なります。

インライン要素とは

インライン要素は、
横に並ぶ要素です。

特徴
・内容の幅だけを持つ
・改行されない

代表例
・span
・a
・strong

文章の流れの中で使われます。

なぜ要素が横に並ばないのか

初心者が最初につまずくポイントです。

原因はシンプルで、
ブロック要素は縦に並ぶ仕様だからです。

div を並べても横に並ばないのは、
CSSが正しく動いていないのではなく
「仕様どおり動いている」状態です。

displayで並び方を変える

displayを指定することで、
要素の並び方を変更できます。

よく使われる指定は次のとおりです。

・block
・inline
・inline-block
・none

inline-blockの考え方

inline-blockは、
横に並びつつ、サイズ指定ができる
表示形式です。

・横並びにしたい
・幅や高さも指定したい

といった場合に使われます。

display:none の注意点

display:none を指定すると、
要素は 完全に非表示 になります。

・画面に表示されない
・場所も存在しない

「見えないだけ」ではなく、
存在しない扱いになる点に注意しましょう。

positionとは何か

positionは、
要素の配置方法を決めるプロパティです。

「どこを基準に、
どこへ配置するか」
を指定します。

positionを使わない場合、
要素は通常の流れに従って配置されます。

positionの種類

よく使われる position は、
次の4つです。

・static
・relative
・absolute
・fixed

この違いを理解することが重要です。

static（初期状態）

staticは、
positionの初期値です。

特別な指定はなく、
HTMLの流れ通りに配置されます。

relative（相対位置）

relativeは、
元の位置を基準に動かす 指定です。

ポイント
・元の場所は保持される
・微調整に使われる

後述する absolute の
基準としても重要です。

absolute（絶対位置）

absoluteは、
特定の基準を元に配置する 指定です。

特徴
・通常の流れから外れる
・基準は親要素になることが多い

absoluteを使う場合、
親要素に relative を指定する
というセット運用が基本です。

fixed（画面固定）

fixedは、
画面を基準に固定表示する指定です。

使いどころ
・ヘッダー固定
・追従メニュー

スクロールしても、
位置が変わらないのが特徴です。

なぜpositionが難しく感じるのか

理由は、
基準が分かりにくい からです。

・どこを基準にしているのか
・通常の流れに含まれるか

この2点を意識することで、
positionの理解は一気に楽になります。

display と position の使い分け

考え方を整理します。

・並び方を変えたい
　→ display

・位置を調整したい
　→ position

まず display、
それでも足りなければ position
という順で考えると混乱しにくくなります。

Flexboxは次のステップ

ここまでの内容は、
Flexboxを理解するための前提知識です。

いきなりFlexboxに進むと、
「なぜそう動くのか」が分からなくなります。

基礎を押さえたうえで進むことが、
遠回りに見えて最短ルートです。

まとめ

display と position は、
CSSレイアウトの基本中の基本です。

・display：並び方を決める
・position：配置基準を決める
・ブロックとインラインの違いを理解する

ここまで理解できれば、
CSSレイアウトの土台は完成です。

次は、
現代CSSレイアウトの主役である Flexbox
に進みます。

次に読むべき記事

▶ 次の記事
4-6 Flexboxの基本

▶ 関連記事
4-4 ボックスモデルを完全に理解する