Web制作を学んでいると必ずぶつかるのが、**「要素を思い通りに並べられない」という悩みです。かつては複雑な手法が必要でしたが、現在はFlexbox（フレックスボックス）**を使えば、一瞬で解決します。
この記事では、初学者が「これだけ知っておけば実務で困らない」というポイントを凝縮して備忘録としてまとめました。
Flexboxとは？（なぜ必要なのか）
Flexboxは、HTMLの要素を「横に並べる」「縦に並べる」「綺麗に整列させる」ためのCSSの機能です。
- 中央揃えが数行で書ける
- 要素を両端に飛ばせる
- スマホ表示で順番を入れ替えられる
など、モダンなWebデザインには欠かせない技術です。
基本の仕組み：親要素と子要素
Flexboxを扱う上で最も大切なのが、**「親子関係」**を意識することです。
- 親要素（Flex Container）:
display: flex;を指定する箱。 - 子要素（Flex Item）: 親要素の中に並ぶ要素たち。
親要素に「どう並んでほしいか」を指示することで、中の子要素たちが一斉に動き出します。
これだけは覚えたい！基本プロパティ3選
プロパティはたくさんありますが、まずはこの3つをマスターしましょう。
① justify-content（主軸方向の整列）
要素を横方向にどう並べるかを決めます（デフォルト時）。
center: 中央揃えspace-between: 最初と最後を両端に、間を均等に。flex-end: 右寄せ
② align-items（交差軸方向の整列）
要素を縦方向にどう並べるかを決めます。
center: 上下中央揃えstretch: 親の高さに合わせて伸びる（デフォルト）。
③ flex-wrap（折り返し設定）
要素が親の幅を超えたときに、折り返すかどうかを決めます。
nowrap: 折り返さず、無理やり1行に収める。wrap: 収まりきらない分は次の行へ。
【コピペOK】実務で使うFlexboxパターン集
よく使うコードをまとめました。迷ったらここをコピーしてください。
究極の上下左右中央揃え
CSS
.container {
display: flex;
justify-content: center; /* 左右中央 */
align-items: center; /* 上下中央 */
height: 300px; /* 親に高さが必要 */
}
ヘッダーのロゴとメニューを両端配置
CSS
.header-nav {
display: flex;
justify-content: space-between; /* 両端に広げる */
align-items: center; /* 縦のラインを揃える */
}
Flexboxの調整は「検証ツール」が最強！
「あれ、どっちのプロパティだっけ？」と迷ったときは、ブラウザの**検証ツール（DevTools）**を活用しましょう。
検証ツールの「Flexboxエディター」を使おう
Google Chromeなどの検証ツールには、Flexboxを直感的に操作できる専用のボタンが用意されています。
- ブラウザ上で右クリック ＞ [検証] を選択
- 親要素のCSSにある
display: flex;の横にある小さなアイコンをクリック - 表示されるパネルのボタンをポチポチ押すだけで、レイアウトがリアルタイムに変わります！
いちいちコードを書き換えて保存してリロード…という手間が省けるので、爆速でレイアウトを追い込めます。
制作のヒント：Flexboxが効かない時は？
もし思い通りに動かない場合は、以下を確認してみましょう。
display: flex;を親要素にかけているか？（子にかけても動きません）- 親要素に「高さ（height）」があるか？（上下中央揃えが効かない主な原因です）
まとめ
Flexboxは、一度覚えてしまえばレイアウトの自由度が劇的に上がります。 まずは「親に display: flex; をかける」ことから始めて、色々なパターンを試してみてくださいね！
あわせて読みたい：
コメント