Flexing goes brrr...

1
2
3

Basic Terminology

Terminology Illustration

Interactive example for `flex-direction` property:

Item 1
Item 2
Item 3

Interactive example for `flex` property:

`flex` property is short-hand for `flex-grow`, `flex-shrink` and `flex-basis`. Setting `flex: 1;` is same as doing `flex: 1 1 0;`.

flex-1;
change-me
flex-1;

Interactive example for `justify-content` property:

`justify-content` is used to align items across the main axis.

1
2
3

Interactive example for `align-items` property:

`align-items` is used to align items across the cross axis.

1
2
3

"4 layouts for the price of 1":