Without Flex

• 1
• 2
• 3
• 4

Display Flex

display: flex;

• 1
• 2
• 3
• 4

Flex Order

order: 1; order: 2; order: 3;

• 1
• 2
• 3
• 4

Flex Direction

flex-direction: row;

• 1
• 2
• 3
• 4

flex-direction: row-reverse;

• 1
• 2
• 3
• 4

flex-direction: column;

• 1
• 2
• 3
• 4

flex-direction: column-reverse;

• 1
• 2
• 3
• 4

Flex Wrap

flex-wrap: nowrap;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

flex-wrap: wrap;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

flex-wrap: wrap-reverse;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Flex Grow

flex-grow: 2; flex-grow: 3; flex-grow: 4;

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Flex Shrink

flex-shrink: 2; flex-shrink: 3; flex-shrink: 4;

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Flex Flow

flex-flow: row-reverse wrap-reverse;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Flex Basis

flex-basis: 40px; flex-basis: 200px; flex-basis: 120px;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Justify Content

justify-content: start;

• 1
• 2
• 3
• 4
• 5

justify-content: flex-end;

• 1
• 2
• 3
• 4
• 5

justify-content: center;

• 1
• 2
• 3
• 4
• 5

justify-content: space-between;

• 1
• 2
• 3
• 4
• 5

justify-content: space-around;

• 1
• 2
• 3
• 4
• 5

justify-content: space-evenly;

• 1
• 2
• 3
• 4
• 5

Align Items

align-items: flex-start;

• 1
• 2
• 3
• 4
• 5

align-items: flex-end;

• 1
• 2
• 3
• 4
• 5

align-items: center;

• 1
• 2
• 3
• 4
• 5

Align Self

align-self: flex-start; align-self: flex-end;

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

Align Content

align-content: space-between;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

align-content: center;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15