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

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

3

2

0

1