Flexbox Cheat Site

display

要素の表示形式

1
2
3
4
flex
1
2
3
4
inline-flex

flex-direction

子要素の並ぶ向き

1
2
3
4
row
1
2
3
4
row-reverse
1
2
3
4
column
1
2
3
4
column-reverse

flex-wrap

子要素の折り返し

1
2
3
4
nowrap
1
2
3
4
wrap
1
2
3
4
wrap-reverse

justify-content

水平方向の揃え方

1
2
3
4
flex-start
1
2
3
4
flex-end
1
2
3
4
center
1
2
3
4
space-between
1
2
3
4
space-around
1
2
3
4
space-evenly

align-items

垂直方向の揃え方

1
2
3
4
flex-start
1
2
3
4
flex-end
1
2
3
4
center
1
2
3
4
baseline
1
2
3
4
stretch

align-content

複数行のときの揃え方

1
2
3
4
flex-start
1
2
3
4
flex-end
1
2
3
4
center
1
2
3
4
space-between
1
2
3
4
space-around
1
2
3
4
space-evenly
1
2
3
4
stretch

order

順序の指定

1
2
3
4
-1
1
2
3
4
0
1
2
3
4
1

align-self

子要素の垂直方向の揃え方

1
2
3
4
flex-start
1
2
3
4
flex-end
1
2
3
4
center
1
2
3
4
baseline
1
2
3
4
stretch

flex-grow

子要素の伸びる率

1
2
3
4
0
1
2
3
4
1

flex-shrink

子要素の縮む比率

1
2
3
4
0
1
2
3
4
1

flex-basis

子要素の基本幅の指定

1
2
3
4
30%
1
2
3
4
50%
1
2
3
4
content

gap

行や列の間のすき間

1
2
3
4
8px
1
2
3
4
32px
1
2
3
4
4px 80px

header

ヘッダーの例

1
2
3
4
header1
1
2
3
4
header2
1
2
3
4
header3

list

リストの例

1
2
list1
1
2
3
4
5
list2
1
2
list3
1
2
list4

page

ページレイアウトの例

1
2
page1
1
2
3
4
page2