411 REFERENCE · Wikibooks
Cascading Style Sheets/Flexbox
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Flexbox is a great way to improve layouts in web pages. It is supported in every major browsers.
1
2
3
4
5
6
Container
flex-direction
column
1
2
3
4
5
6
column-reverse
1
2
3
4
5
6
row
1
2
3
4
5
6
row-reverse
1
2
3
4
5
6
flex-wrap
nowrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
As you can see, the elements are squeezed to fit the box.
wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
As you can see, the elements are wrapped.
wrap-reverse
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
As you can see, the elements are wrapped from bottom to top.
flex-flow
Syntax: flex-flow: flex-direction flex-wrap;
justify-content
center
1
2
3
4
5
6
flex-start
1
2
3
4
5
6
flex-end
1
2
3
4
5
6
space-evenly
1
2
3
4
5
6
space-around
1
2
3
4
5
6
space-between
1
2
3
4
5
6
align-items
A container height of 4em is used to demonstrate these examples.
center
1
2
3
4
5
6
flex-start
1
2
3
4
5
6
flex-end
1
2
3
4
5
6
stretch
1
2
3
4
5
6
baseline
This demonstration is shown with different font sizes. The position matches the bottom of text.
1
2
3
4
5
6
align-content
A container height of 16em is used to demonstrate these examples. The container must wrap the items in order to work.
flex-start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
flex-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
space-evenly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
space-around
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
space-between
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
gap
This CSS function for flexbox is a fairly new function. It is introduced in Chrome and Edge 84, Firefox 63, Opera 70 and Safari 14.1. It measures the gutter between flex items.
This is a example with 4px gap around the items.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
This is another example with 12px 6px gap around the items (12px between rows, 6px between columns).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Items
order
This property determines the order of each flex item. It is sorted from lowest to highest.
This demonstration shows:
1st div shows an order of 4
2nd div shows an order of 6
3rd div shows an order of 2
4th div shows an order of 3
5th div shows an order of 1
6th div shows an order of 5
1
2
3
4
5
6
flex-grow
This property controls the growth relative to each flex item.
1
1
3
2
0
1
flex-shrink
This property controls the shrinkage relative to each flex item. Width of 25% for each item is used (150% in total), allowing for shrinking without wrapping.
1
1
3
2
0
1