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の主軸をどの方向にするか決める)
主軸は、要素が並ぶ方向の軸のことです。
row (デフォルト)
横並びrow-reverse
横並び逆順column
縦並びcolumn-reverse
縦並び逆順
justify-content (主軸方向の並びを調整)
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 (交差軸方向の配置を調整)
flexbox使う時はよく使いますね。
交差軸は主軸の直交する方向のことです。
normal (デフォルト)
flexboxにおいてはstretch
と同様stretch
子要素の高さが未指定な`ら、親の高さいっぱいに引き伸ばされる。flex-start
子要素が上に詰まる(縦方向の場合)center
子要素が中央に寄る。flex-end
子要素が下に詰まるbaseline
各子要素の テキストの下線位置(ベースライン) を揃える。
align-self (子要素ごとにalign-items
を上書き)
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 (要素と要素のスペースを指定する)
flexboxで要素と要素の間に等間隔にスペースを持たせたい時はmarginではなく、gap使っていますね。
normal (デフォルト)
0と同じ8px
8pxの間隔
2つの値を指定することも可能
gap: 16px 8px;
16px
縦の間隔(row-gap
)8px
横の間隔(column-gap
)
order (子要素の順番を変える)
PCとSPでレイアウトが異なり、表示順を簡単に変えたい時に使っています。
grid-row
やgrid-column
でも順番変更はできると思いますが、単純な並び替えはorder
が楽な気がします。
0(デフォルト)
初期値1(整数値)
正の値、負の値でも可、数字が小さいほど先に表示され、同じ値ならHTMLの記述順
flex (Flexboxの子要素に対してどのくらいスペースを取るかを一括指定するプロパティ)
正直一番曖昧なプロパティでした。
flex: <flex-grow> <flex-shrink> <flex-basis>
flex: 1
はflex: 1 1 0%
と同じ意味になります。基本的にはショートハンドを使って、値を個別で指定したい場合には個別指定します。
flex-grow
- 要素がどれだけ伸びるかを比率で指定。
- 親要素の余ったスペースを各要素に割り振るときの重み。
- 0がデフォルト(余白を無視して元のサイズのまま)
flex-shrink
- 要素がどれだけ縮むかを比率で指定。
- 親のサイズより子要素合計が大きい時、縮小されるときの優先度。
- 1 がデフォルト(縮むのを許可)
flex-basis
- 要素の初期サイズ(幅や高さ)widthより優先される。
- auto(デフォルト):内容に応じたサイズ
まとめ
今まで何となく使えていたからこそ、あまり深く調べることはしてきませんでしたが、今回改めて勉強したことで、各プロパティの違いをしっかり理解できてよかったです。
次は、Gridや高さ・幅の指定など、まだ理解があやふやな部分を改めて整理していこうと思います。
ここまで読んでいただき、ありがとうございました!