CSS Flexbox チートシート

基本的な使い方

display:flex の要素の下に、block要素を配置するとそれが自動的にフレックスアイテムになる。
コンテナの要素に、アイテムを流し込んで配置するイメージ。

フレックス・コンテナ

flex-direction

アイテムをどの方向に並べるか。右から左？上から下？

row (規定)

1
2
3
4

row-reverse

1
2
3
4

column

1
2
3
4

column-reverse

1
2
3
4

flex-wrap

アイテムの折り返し指定。

nowrap (規定)

1
2
3
4
5
6
7
8
9

wrap

1
2
3
4
5
6
7
8
9

wrap-reverse

1
2
3
4
5
6
7
8
9

flex-flow (一括指定)

flex-flow: direction値 wrap値;

justify-content

アイテムの横位置の詰め方。

start (規定)

1
2
3
4

end

1
2
3
4

center

1
2
3
4

space-between

1
2
3
4

space-evenly

1
2
3
4

align-items

アイテムの縦位置をどこに置くか。

stretch (規定)

1
2
3
4
5
6
7
8
9

flex-start

1
2
3
4
5
6
7
8
9

center

1
2
3
4
5
6
7
8
9

flex-end

1
2
3
4
5
6
7
8
9

align-content

複数行になったとき、アイテムをどのような詰め方で置くか。

stretch (規定)

1
2
3
4
5
6
7
8
9

flex-start

1
2
3
4
5
6
7
8
9

center

1
2
3
4
5
6
7
8
9

flex-end

1
2
3
4
5
6
7
8
9

space-between

1
2
3
4
5
6
7
8
9

space-around

1
2
3
4
5
6
7
8
9

フレックス・アイテム

flex-grow

フレックスコンテナの主軸の幅に余白がある場合の、フレックスアイテムの伸び率を指定。大きいほど幅が広がる。
伸び率はフレックスコンテナの主軸の幅やflex-wrapプロパティの折り返しの指定、flex-basisプロパティに影響される。
0にすると、flex-basisで指定した幅固定になる。
0
1
2

flex-shrink

アイテム合計幅がコンテナ幅よりも大きい場合の、アイテムの縮み率を指定。大きいほど幅が縮む。
flex-wrap:no-wrapの場合のみ意味を持つ。
0にすると、flex-basisで指定した幅固定になる。
0
1
2

flex-basis

幅を固定や％で指定。
widthとほぼおなじだが、flex-grow, flex-shrink 使うときは width じゃなくて flex-basis を元にする。
100px
50px

flex (一括指定)

flex: grow値 shrink値 basis値;

align-self

親の align-items を無視してどこに置くかを指定する。
親に従うなら auto を指定する。

stretch

1
2
3
4

flex-start

1
2
3
4

center

1
2
3
4

flex-end

1
2
3
4

order

以下はhtmlソースでは1～4をバラバラの順に書いてあるが、orderを指定することで指定順に表示している。

order

1
4
2
3

参考URL

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout
https://app.codegrid.net/entry/flexiblebox-1
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet