FlexBox

Flex Direction

A small visual explanation about flexbox properties. Press on each button to activate the animation and see how Flexbox works for each property.

Row (default)

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

Justify Content

Flex-Start

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

Align Items

Flex-Start

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

Align Content

Flex-Start

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5