Flexbox:

flex, flex-direction and wrap

Control the direction of your flexbox layout, with the flex-direction property

Some flexbox properties apply to the flex container only, while some apply only to the flex items.

The flex-direction property applies to the flex container only.

The default value for flex-direction is row.

container {display: flex}

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

To reverse the direction flex items in a row, use the value row-reverse.

container {display: flex; flex-direction: row-reverse}

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

The value column rotates the main axis so that flex items are laid out vertically.

container {display: flex; flex-direction: column}

Item 1
Item 2
Item 3

The flex container can break flex items onto multiple lines and allow them to wrap as needed.

With the flex-wrap property, you can control whether the flex container is a single-line or multi-line layout.

The flex-wrap property is for flex containers only.

With the flex-wrap property, you can control whether the flex container is a single-line or multi-line layout.

The value wrap breaks the flex items into multiple lines.

container {display: flex; flex-wrap: wrap}

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

container {display: flex; flex-direction: column; flex-wrap: wrap}

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Like the row-reverse property, you can swap the top-to-bottom direction of a column with the value column-reverse.

container {display: flex; flex-direction: column-reverse}

Item 1
Item 2
Item 3