Flex-item in row. Flex-item elements will fill up availabe parent's space.

Flex-item in column. Flex-item elements will fill up availabe parent's space.

Set flex-item's size through flex-basis.

Set flex-item's size through flex-grow.

Non flex container parent with flex-item children.

Flex container parent contain both flex-item children and non flex-item children.

Flex container parent with non flex-item children. Children's width and height have to be set manually.