1/ An element that has its display set to flex (its children become flex items).

item container

display container

set container

flex container

2/ When flex-basis is a value other than zero, extra space is divided up based on their flex ratios. An item with a flex ratio of 2 would get twice as much extra space allotted to it than an item with a flex ratio of 1 (although it may not end up twice as wide as 1 depending on its content).

absolute flex

flex container

flex direction

reflective flex

3/ Flex items can be made into flex containers by setting their display to flex.

display container

flex container

nexted flexbox

flexbox

4/ The area between the content area and an optional border.

Edge

Padding

Border

Margin