【完全ガイド】Flexbox（フレックスボックス）とは？基本プロパティと使い方をわかりやすく解説

CSSでレイアウトを組むとき、「要素を横並びにしたい」「中央に配置したい」と悩んだことはありませんか？
そんなときに便利なのが Flexbox（フレックスボックス） です。
Flexboxを使えば、要素の並び方・整列・サイズ調整を驚くほど簡単にコントロールできます。

この記事では、display: flex; の基本から justify-content・align-items などの主要プロパティまで、初心者でも理解できるように丁寧に解説します！

フレックスボックス（Flexbox)は、要素を柔軟にレイアウトできるCSSのレイアウトモデルです。
親要素に display: flex; を設定すると、子要素の配置やサイズ調整が簡単にできます。

flexboxの基本的な使い方

・水平に並べる

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

・結果
display: flex;にすると、itemが横並びになる。

justify-content (横方向の揃え方)

・justify-contentを使って子要素を整列

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

justify-contentの値	説明
flex-start	左寄せ（デフォルト）
flex-end	右寄せ
center	中央揃え
space-between	両端揃え（間が均等）
space-around	すべての要素の間隔を均等に（両端も余白あり）
space-evenly	すべての要素の間隔を完全に均等に

align-items （縦方向の揃え方）

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

align-itemsの値	説明
stretch	（デフォルト）高さが自動調整される
flex-start	上寄せ
flex-end	下寄せ
center	縦中央

flex-direction（並び方を変更）

・縦並び（カラム）にする

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

flex-directionの値	説明
row	横並び（デフォルト）
row-reverse	横並び（逆順）
column	縦並び
column-reverse	縦並び（逆順）

flex-wrap(折り返しの設定)

通常フレックスボックスは1行に収めようとするので、画面が狭いと要素が潰れることがあります。
折り返したい場合は flex-wrap: wrap; を使います。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

flex-wrapの値	説明
nowrap	折り返さない（デフォルト）
wrap	折り返す
wrap-reverse	折り返し（逆順）

flex(個々の要素のサイズ調整)

個々の .item に flex: 1; を指定すると、均等に幅を広げる。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

もし特定の要素を２倍の大きさにしたい場合：

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

align-self(個別の縦位置調整)

全体の align-items を指定しても、特定の要素だけ違う位置にしたい場合 align-self を使う。

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

・まとめ

プロパティ	役割
display: flex;	フレックスボックスを適用
justify-content	横方向の配置調整
align-items	縦方向の配置調整
flex-direction	横並び　or 　縦並び
flex-wrap	要素の折り返し設定
flex	各要素のサイズ調整
align-self	個別の要素の縦位置調整

フレックスボックスを使うとレイアウトがシンプルに調整できるので、ぜひ試してみてください^^！

その他関連記事はこちら→プログラミング備忘録