Flex

Alignment and Justify

Stretch / Left

1-4
1-4
...
1-4
...
...

Middle / Center

1-4
1-4
...
1-4
...
...

Bottom / Right

1-4
1-4
...
1-4
...
...

Top / Space between

1-4
1-4
...
1-4
...
...

Stretch / Space around

1-4
1-4
...
1-4
...
...

Wrap and alignment

Stretch

1-3
1-2
...
1-3
...
...
1-3
1-2
...
1-3
...
...

Top

1-3
1-2
...
1-3
...
...
1-3
1-2
...
1-3
...
...

Middle

1-3
1-2
...
1-3
...
...
1-3
1-2
...
1-3
...
...

Bottom

1-3
1-2
...
1-3
...
...
1-3
1-2
...
1-3
...
...

Space between

1-3
1-2
...
1-3
...
...
1-3
1-2
...
1-3
...
...

Space around

1-3
1-2
...
1-3
...
...
1-3
1-2
...
1-3
...
...

Inline flex

1-4
1-4
...
1-4
...
...

Order

1
2
3
1
2
3
1
2
3

Vertical margin

Heading

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Flex middle

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Flex vertical align with height

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.