前の記事では、
display と position を使ったレイアウトの基本を学びました。
しかし、実際にレイアウトを組もうとすると、
次のような悩みが出てきます。
・要素を横に並べたいだけなのに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）
コメント