Flexbox Demonstrated

flex-direction:

row (default)

row-reverse

column

column-reverse

1

2

3

flex-wrap:

nowrap (default)

wrap

wrap-reverse

1

2

3

4

5

6

7

justify-content:

flex-start (default)

flex-end

center

space-between

space-around

space-evenly

1

2

3

align-items:

flex-start

flex-end

center

stretch (default)

baseline

1

2

3

4

align-content:

flex-start

flex-end

center

stretch (default)

space-between

space-around

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16