Wikibooks

Cascading Style Sheets/Flexbox

< Cascading Style Sheets
This page was last edited on 11 December 2024, and is still under heavy construction.
Content that is added is likely to be moved/deleted/edited significantly in a short amount of time. All Wikibookians with knowledge in this subject are welcome to help out.
You can remove this tag when the book has become more mature.

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

edit

flex-direction

edit

column

edit
1
2
3
4
5
6

column-reverse

edit
1
2
3
4
5
6

row

edit
1
2
3
4
5
6

row-reverse

edit
1
2
3
4
5
6

flex-wrap

edit

nowrap

edit
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

edit
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

edit
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

edit

Syntax: flex-flow: flex-direction flex-wrap;

justify-content

edit

center

edit
1
2
3
4
5
6

flex-start

edit
1
2
3
4
5
6

flex-end

edit
1
2
3
4
5
6

space-evenly

edit
1
2
3
4
5
6

space-around

edit
1
2
3
4
5
6

space-between

edit
1
2
3
4
5
6

align-items

edit

A container height of 4em is used to demonstrate these examples.

center

edit
1
2
3
4
5
6

flex-start

edit
1
2
3
4
5
6

flex-end

edit
1
2
3
4
5
6

stretch

edit
1
2
3
4
5
6

baseline

edit

This demonstration is shown with different font sizes. The position matches the bottom of text.

1
2
3
4
5
6

align-content

edit

A container height of 16em is used to demonstrate these examples. The container must wrap the items in order to work.

flex-start

edit
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

edit
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

edit
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

edit
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

edit
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

edit
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

edit

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

edit

order

edit

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

edit

This property controls the growth relative to each flex item.

1
1
3
2
0
1

flex-shrink

edit

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
Retrieved from "https://en.wikibooks.org/w/index.php?title=Cascading_Style_Sheets/Flexbox&oldid=4452184"