Flex container

Properties applied to the container define the direction, wrapping and positioning of child items

Flex direction

This defines the direction items are placed in within the flex container, essentially whether to extend in horizontal rows or vertical columns.

.container {
    display: flex;
    flex-direction: row [default] | row-reverse | column | column-reverse;
}

Flex wrap

By default flex items will try to fit onto one line. Wrapping can be controlled with this property and the flex-direction to control the axis of stacking

.container {
    display: flex;
    flex-wrap: nowrap [default] | wrap | wrap-reverse;
}