Cascading Style Sheets/Flexbox

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
Category:Book:Cascading Style Sheets#Flexbox%20
Category:Book:Cascading Style Sheets