きまぐれ引きこもりんご80%

Flexbox【第6回】チートシート・まとめ

web制作

flexboxチートシート

前回でFlexboxシリーズは終了しましたが、自分用にチートシートとしてまとめました。

Flexboxチートシート

Flexboxコンテナーのプロパティ

まずはFlexboxコンテナーのdisplayをflexに
display: flex;
※インライン要素の場合 { display: inline-flex; }

flex-direction
・・・Flexboxアイテムの配置方向

row(初期値)順方向
row-reverserowの逆方向
column縦並び
column-reversecolumnの逆方向

justify-content
・・・flex-direction方向に揃え・レイアウト

flex-start(初期値)始点揃え
flex-end終点揃え
center中央揃え
space-between等間隔配列
space-aroundアイテム左右に等しく間隔をとる

align-items
・・・flex-directionに対して垂直方向の揃え・レイアウト

stretch(初期値)コンテナーの高さいっぱいに広がる
flex-start始点揃え
flex-end終点揃え
center中央揃え
baselineベースライン揃え

※Flexboxコンテナーに高さの指定をしないと有効にならない点に注意

flex-wrap
・・・Flexboxアイテムの折り返し設定

nowrap(初期値)アイテムは折り返されない
wrapコンテナの幅を超えると折り返される
wrap-reverseアイテムは折り返され下から始まる

align-content
・・・複数行の揃え・レイアウト

stretch(初期値)コンテナーの高さいっぱいに広がる
flex-start始点揃え
flex-end終点揃え
center中央揃え
space-between等間隔配列
space-aroundアイテム上下に等しく間隔をとる

Flexboxアイテムのプロパティ

flex-basis: auto;(初期値)
Flexboxアイテムの幅
※flex-grow, flex-shrinkに影響する

flex-grow: 0;(初期値)
Flexboxアイテムの伸びる比率
※初期値の「0」は拡大なし

flex-shrink: 1;(初期値)
Flexboxアイテムの縮む比率
※初期値の「1」は縮小あり。「0」は縮小なし

order: 0;(初期値)
Flexboxアイテムの順番を指定

align-self: auto;(初期値)
Flexboxアイテムの垂直方向の揃えを指定
※プロパティ値は初期値のauto以外はalign-itemsと同じ
align-itemsの指定よりalign-selfの指定の方が優先される

Flexコンテナーのショートハンド

flex-flow: row nowrap;(初期値)
flex-directionとflex-wrapの値をまとめて指定

Flexアイテムのショートハンド

flex: 0 1 auto;(初期値)
flex-grow、flex-shrink、flex-basisの値をまとめて指定
※IE11ではflex-basisの単位を省略すると効かなくなるので単位をつける