【CSS】Flexboxの「初期値」と「軸」をやさしく整理する

「なぜかアイコンが潰れる」「書いた覚えがないのに高さが揃っている」
Flexboxを使っていると、こんな挙動に戸惑うことは少なくありません。
その原因の多くは、 Flexboxにあらかじめ用意されている「初期値」と「軸の考え方」 にあります。

この記事では、Web制作で必ず使うFlexboxについて、ブラウザが最初から決めているルールを順番に整理します。

1. レイアウト全体を決める「親（コンテナ）」の初期値

display: flex; を指定した瞬間、親要素には以下のルールが自動的に適用されます。
自分で書いていなくても、最初から有効になっている設定です。

プロパティ	初期値	意味・挙動
flex-direction	row	**主軸を「横」**にする。左から右へ並ぶ。
flex-wrap	nowrap	折り返さない。1行に収まろうとする。
justify-content	flex-start	主軸方向の左寄せに配置する。
align-items	stretch	交差軸方向いっぱいに伸びる。高さを揃える。

👉「何も指定していないのに横並びになる」「高さが揃う」のは、この初期値が原因です。

2. 要素ごとの動きを決める「子（アイテム）」の初期値

次に、Flexboxの中に入る 子要素（フレックスアイテム） の初期値です。
ここでは、それぞれのプロパティが 主軸か交差軸のどちらを担当するか が重要になります。

分類	プロパティ	初期値	役割・意味（分かりやすく）
主軸（横並びなら幅）	flex-grow	0	余白があっても広がらない。自分から大きくはならない。
主軸（横並びなら幅）	flex-shrink	1	親の幅が足りないとき、自分が縮んで調整役になる。
主軸（横並びなら幅）	flex-basis	auto	基準となるサイズ。width や中身の大きさを元に決まる。
交差軸（横並びなら高さ）	align-self	auto	親の指定に従う。通常は align-items: stretch と同じ挙動になる。

👉 アイコンや画像が潰れるのは、flex-shrink: 1 が初期値だから、というケースがよくあります。

3. 最重要ポイント：「幅」か「高さ」かは“軸”で決まる

Flexboxでは、どのプロパティが「幅」を扱い、どれが「高さ」を扱うかは軸次第です。

flex-direction: row; （デフォルト）のとき

• flex- 系プロパティ ＝ 「横幅」 のコントロール
• align- 系プロパティ ＝ 「高さ」 のコントロール

flex-direction: column（縦並び）のとき

• flex- 系プロパティ ＝ 「高さ」 のコントロール
• align- 系プロパティ ＝ 「横幅」 のコントロール

👉 プロパティ自体の意味は変わりません。
「どの軸に作用しているか」だけが入れ替わる、と理解すると混乱しにくくなります。

まとめ

• Flexboxの挙動は「初期値」と「軸」を知ると一気に理解しやすくなる
• 思わぬ縮みや揃いは、ほとんどが初期値の影響
• 「今、主軸はどっち？」を常に意識するのが最大のコツ

Flexboxで迷ったら、まずは軸と初期値を疑うところから始めてみてください。