Zuga.net | CSS - Flexbox properties

display:

flex

|

inline-flex

;

flex-direction:

row

1

2

3

|

row-reverse

1

2

3

|

column

1

2

3

|

column-reverse

1

2

3

;

flex-wrap:

wrap

1

2

3

4

5

6

7

8

9

|

nowrap

1

2

3

4

5

6

7

8

9

|

wrap-reverse

1

2

3

4

5

6

7

8

9

;

justify-content:

flex-start

|

flex-end

|

center

|

space-between

|

space-around

|

space-evenly

;

align-items:

flex-start

|

flex-end

|

center

|

stretch

|

baseline

a

b

c

;

align-content:

flex-start

1

2

3

4

5

6

7

8

9

|

flex-end

1

2

3

4

5

6

7

8

9

|

center

1

2

3

4

5

6

7

8

9

|

stretch

1

2

3

4

5

6

7

8

9

|

space-between

1

2

3

4

5

6

7

8

9

|

space-around

1

2

3

4

5

6

7

8

9

;

order:

0

1

2

3

|

[number]

1

2

3

;

flex-grow:

0

|

[number]

1

2

1

;

flex-shrink:

1

Using: flex-basis: 10;

|

[number]

1

2

1

Using: flex-basis: 10;

;

flex-basis:

auto

|

[length] or [percentage]

5em

10em

20em

;

align-self:

auto

|

flex-start

|

flex-end

|

center

|

baseline

a

b

c

|

stretch

;

align-self is an item level override for the container level property align-items.
In this example, we specify an override for the third item in the list. Items 1 and 2 are aligned according to the container's align-items property, which in this case, has the default value of stretch.

flex-flow:

[flex-direction] [flex-wrap];

E.g.: row wrap;

flex:

[flex-grow] [flex-shrink] [flex-basis];

E.g.: 0 1 auto;

CSS - Flexbox properties - A visual guide

Container properties

Item Properties

Shorthand properties