flexbox

flex-direction: row;

左から並ぶ

• 0
• 1
• 2
• 3

flex-direction: column;

上から並ぶ

• 0
• 1
• 2
• 3

flex-direction: row-reverse;

右から並ぶ

• 0
• 1
• 2
• 3

flex-direction: column-reverse;

下から並ぶ

• 0
• 1
• 2
• 3

flex-wrap: nowrap;

折り返さない

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

flex-wrap: wrap;

下に折り返す

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

flex-wrap: wrap-reverse;

上に折り返す

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

flex-flow: column wrap;

flex-column と flex-wrap　を同時に指定する

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

justify-content: flex-start;

横配置で、左揃え。縦配置で、上揃え。

• 0
• 1
• 2
• 3

• 0
• 1
• 2
• 3

justify-content: flex-end;

横配置で、右揃え。縦配置で、下揃え。

• 0
• 1
• 2
• 3

• 0
• 1
• 2
• 3

justify-content: center;

中央ぞろえ

• 0
• 1
• 2
• 3

justify-content: space-between;

等間隔にあける

• 0
• 1
• 2
• 3

justify-content: space-around;

等間隔にあける、両端もその他のマージンの半分空ける

• 0
• 1
• 2
• 3

align-content: flex-start;

横配置で、上揃え。縦配置で、左揃え。

• 0
• 1
• 2
• 3
• 4
• 5

• 0
• 1
• 2
• 3
• 4
• 5

align-content: flex-end;

横配置で、下揃え。縦配置で、右揃え。

• 0
• 1
• 2
• 3
• 4
• 5

• 0
• 1
• 2
• 3
• 4
• 5

align-content: center;

中央揃え。

• 0
• 1
• 2
• 3
• 4
• 5

align-content: space-between;

等間隔に空ける。

• 0
• 1
• 2
• 3
• 4
• 5

align-content: space-around;

等間隔に空ける。両端は間の間隔の半分空ける。

• 0
• 1
• 2
• 3
• 4
• 5

order: 数字;

数字のに並べる。

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

align-self: flex-start;

上寄せ（2番目）。

• 1
• 2
• 3
• 4

align-self: flex-end;

下寄せ（2番目）。

• 1
• 2
• 3
• 4

align-self: center;

中央寄せ（2番目）。

• 1
• 2
• 3
• 4

align-self: baseline;

ベースラインを揃える（2番目）。

• 1
• 2
• 3
• 4

align-self: stretch;

一番大きい要素、または親の高さまで伸びる（2番目）。

• 1
• 2
• 3
• 4

flex-basis: 長さ;

基本となる長さを指定する。(今回は70px,指定しないと0pxとなる)。デフォルトはauto。

• 1
• 2
• 3
• 4

flex-grow: 数値;

「全体の領域 - 各要素のbasisを足したもの」の余白を再分配する割合。
以下の例は全体を7としている。
(余白の残り ÷ 7)をそれぞれのgrowの割合で分ける。デフォルトは0。

• gr:1
• gr:1
• gr:2
• gr:3

flex-shrink: 数値;

各要素が収まりきらない場合、shrinkで設定した割合でそれぞれ縮小して収まるように表示する。デフォルトは0。

• sh:1
• sh:1
• sh:2
• sh:3

flex: ‘flex-grow’ ’flex-shrink’ ’flex-basis’;

上記３つプロパティのショートハンド。noneを指定すると '0 0 auto'となる。