flexbox動作確認ページ
※CSS Flexible Box Layout Module Level 1をベース（Update: 20160119）
親要素（flexbox-container）に対する指定
height:
100%
200px
400px
600px
800px
1000px
*組み合わせによってはレイアウトが崩れるので注意
display:
flex
inilne-flex
必ず指定する
*子要素は自動的にflexアイテムと見なされる
flex-direction:
row (def)
row-reverse
column
column-reverse
アイテムをどの方向に並べるか（水平・垂直）
*ショートハンド flex-flow: <direction> <wrap>;
flex-wrap:
nowrap (def)
wrap
wrap-reverse
アイテムを1行or複数行にするか
*ショートハンド flex-flow: <direction> <wrap>;
justify-content:
flex-start (def)
flex-end
center
space-between
space-around
directionに沿ったアイテムの水平の揃え方
align-items:
stretch (def)
flex-start
flex-end
center
baseline
directionに沿ったアイテムの垂直の揃え方
align-content:
stretch (def)
flex-start
flex-end
center
space-between
space-around
各行の揃え方
*複数行あり親要素の方が高い場合に有効
子要素（flexbox-item）に対する共通の指定
margin:
0
10px
20px
30px
40px
50px
width:
auto
150px
200px
250px
300px
350px
400px
450px
500px
100%
order: 0; (def)
order: 1;
order: 2;
order: 3;
flex-grow: 0; (def)
flex-grow: 1;
flex-grow: 2;
flex-grow: 3;
align-self: auto; (def)
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
1行カラム
order: 0; (def)
order: 1;
order: 2;
order: 3;
flex-grow: 0; (def)
flex-grow: 1;
flex-grow: 2;
flex-grow: 3;
align-self: auto; (def)
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
2行
カラム
order: 0; (def)
order: 1;
order: 2;
order: 3;
flex-grow: 0; (def)
flex-grow: 1;
flex-grow: 2;
flex-grow: 3;
align-self: auto; (def)
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
3行
カラ
ム
order: 0; (def)
order: 1;
order: 2;
order: 3;
flex-grow: 0; (def)
flex-grow: 1;
flex-grow: 2;
flex-grow: 3;
align-self: auto; (def)
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
4行
カ
ラ
ム