Flexboxの基本、もう一度ちゃんと理解したかった話

Flexboxの基本、もう一度ちゃんと理解したかった話

2025/05/11 公開

はじめに

Flexboxは何度も使ってるのに、「このプロパティ何だっけ？」って毎回ググったりGPTに聞いたりしています。

自分の理解を整理するためにも、一度ちゃんとまとめておきます。

Flexboxの主なプロパティ一覧と解説

display: flex / inline-flex

display (MDN)
子要素をflexboxで横並びにするのは共通しているが、親要素の挙動が異なります。

display: flexは親要素がブロック要素扱い(横幅いっぱいに背景色が広がる)
display: inline-flexは親要素がインライン扱い(子要素分しか背景色が広がらない)

  • flex ブロック要素をflex化
  • inline-flex インライン要素としてflex化

flex-direction (Flexboxの主軸をどの方向にするか決める)

flex-direction (MDN)

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

  • row (デフォルト) 横並び
  • row-reverse 横並び逆順
  • column 縦並び
  • column-reverse 縦並び逆順

justify-content （主軸方向の並びを調整）

justify-content (MDN)

flexbox使う時よく使いますね。
flex-start / flex-end / center / space-between は個人的によく使いイメージです。
jusitify-content = 横に揃えるって勘違いしていましたが主軸(flex-direction)方向によって軸は変わるので注意しましょう

  • flex-start (デフォルト) 主軸の先頭に詰めて並べる
  • flex-end 主軸の末尾に詰めて並べる
  • center 主軸の中央に寄せて並べる
  • space-between 先頭と末尾に1つずつ固定し、その間を均等に分ける
  • space-around すべてのアイテムに均等な「外側のスペース」をつける（左右に半分ずつ）
  • space-evenly すべてのアイテムの間と端に「完全に均等なスペース」
  • start / end (論理的な整列) 書字方向（LTR/RTL）や writing-mode に応じて動的に変化(基本的にはflex-start, flex-endを使うで問題ないと思います)
    start：書字方向の先頭（通常は左）
    end：書字方向の末尾（通常は右）
  • left / right (物理方向に揃える) 古い値、使うべきではない

align-items （交差軸方向の配置を調整）

align-items (MDN)

flexbox使う時はよく使いますね。
交差軸は主軸の直交する方向のことです。

  • normal (デフォルト) flexboxにおいてはstretchと同様
  • stretch 子要素の高さが未指定な`ら、親の高さいっぱいに引き伸ばされる。
  • flex-start 子要素が上に詰まる(縦方向の場合)
  • center 子要素が中央に寄る。
  • flex-end 子要素が下に詰まる
  • baseline 各子要素の テキストの下線位置（ベースライン） を揃える。

align-self （子要素ごとにalign-itemsを上書き）

align-self (MDN)

  • auto (デフォルト) :親のalign-itemsの値を継承

auto以外はalign-itemsと同じです。

flex-wrap (Flexbox の子要素が親の幅に収まりきらないときに、折り返すかどうかを制御)

flex-wrap (MDN)
そこまで使うことないですが、レスポンシブ対応時にたまに使っていますね。

  • nowrap 折り返さない（すべて1行に詰め込む、はみ出してもOK）
  • wrap 必要に応じて折り返す（下方向に）
  • wrap-reverse 折り返すけど上方向に折り返す（つまり行の順序が下→上になる）

align-content (複数行に折り返されたFlexの子要素の交差軸方向を制御, 1行しかない時は効かない)

align-content (MDN)
今回flexboxの要素を色々調べて初めて存在を知りました。

  • normal (デフォルト) stretchと同様
  • stretch 高さを引き伸ばす

それ以外の値はjustify-contentと同じです

gap (要素と要素のスペースを指定する)

gap (MDN)

flexboxで要素と要素の間に等間隔にスペースを持たせたい時はmarginではなく、gap使っていますね。

  • normal (デフォルト) 0と同じ
  • 8px 8pxの間隔

2つの値を指定することも可能
gap: 16px 8px;

  • 16px 縦の間隔(row-gap)
  • 8px 横の間隔(column-gap)

order (子要素の順番を変える)

order (MDN)

PCとSPでレイアウトが異なり、表示順を簡単に変えたい時に使っています。
grid-rowやgrid-columnでも順番変更はできると思いますが、単純な並び替えはorderが楽な気がします。

  • 0(デフォルト) 初期値
  • 1(整数値)　正の値、負の値でも可、数字が小さいほど先に表示され、同じ値ならHTMLの記述順

flex (Flexboxの子要素に対してどのくらいスペースを取るかを一括指定するプロパティ)

flex(MDN)

正直一番曖昧なプロパティでした。

flex: <flex-grow> <flex-shrink> <flex-basis>
flex: 1はflex: 1 1 0%と同じ意味になります。基本的にはショートハンドを使って、値を個別で指定したい場合には個別指定します。

  • flex-grow
    • 要素がどれだけ伸びるかを比率で指定。
    • 親要素の余ったスペースを各要素に割り振るときの重み。
    • 0がデフォルト(余白を無視して元のサイズのまま)
  • flex-shrink
    • 要素がどれだけ縮むかを比率で指定。
    • 親のサイズより子要素合計が大きい時、縮小されるときの優先度。
    • 1 がデフォルト(縮むのを許可)
  • flex-basis
    • 要素の初期サイズ（幅や高さ）widthより優先される。
    • auto（デフォルト）：内容に応じたサイズ

まとめ

今まで何となく使えていたからこそ、あまり深く調べることはしてきませんでしたが、今回改めて勉強したことで、各プロパティの違いをしっかり理解できてよかったです。
次は、Gridや高さ・幅の指定など、まだ理解があやふやな部分を改めて整理していこうと思います。

ここまで読んでいただき、ありがとうございました！

CSSFE