Flex

Flex-derection

Item 1
Item 2
Item 3
Item 4

flex-direction: row-reverse

Item 1
Item 2
Item 3
Item 4

flex-direction: column

Item 1
Item 2
Item 3

Flex-wrap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

justify-content

flex-start

Item 1
Item 2
Item 3

flex-end

Item 1
Item 2
Item 3

center

Item 1
Item 2
Item 3

space-between

Item 1
Item 2
Item 3

space-around

Item 1
Item 2
Item 3

align-item

Item 1
Item 2
Item 3
Item 4

flex-start

Item 1
Item 2
Item 3
Item 4

flex-end

Item 1
Item 2
Item 3
Item 4

center

Item 1
Item 2
Item 3
Item 4

baseline

Item1
Item2
Item3
Item4

align-content

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

flex-start

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

flex-end

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

space-between

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

space-around

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8