Flexbox:

justify-content, order, flex-grow

The justify-content property lets you control the position and alignment of flex items on the main axis and how space should be distributed in a flex container.

You apply the justify-content property to flex containers only.

The justify-content property lets you control the position and alignment of flex items on the main axis and how space should be distributed in a flex container.

The default value for justify-content is flex-start, which places items towards the start of each flex line.

To place items at the end of the flex line, set justify-content to flex-end.

container {display: flex; flex-wrap: wrap; justify-content: flex-end}

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

The value center places flex items in the center of the line, with equal amounts of empty space between the line's start edge and the first item.

container {display: flex; flex-wrap: wrap; justify-content: center}

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

The value space-between displays equal spacing between flex items.

container {display: flex; flex-wrap: wrap; justify-content: space-between}

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

The value space-around displays equal spacing around flex items.

container {display: flex; flex-wrap: wrap; justify-content: space-around}

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

A margin set to auto will absorb any extra space around a flex item and push other flex items into different positions.

container {display: flex; flex-wrap: wrap; justify-content: space-around}
item-1 {margin-right: auto}

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

container {display: flex; flex-wrap: wrap; justify-content: space-around}
item-2 {margin-right: auto}

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

Use the 'order' property to change the order of any flex item.

The default order of all flex items is 0.

To place a flex item before another item, it needs to have a lower order value than the item.

To place a flex item after another item, it needs to have a higher order value than the item.

container {display: flex}
item-5 {order: -1;} item-2 {order: 1;} item-1 {order: 2;}

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

With flexbox you can make flex items grow or shrink in relation to other flex items and the available space inside the flex container.

The flex-grow property applies to flex items only.

flex-grow determines how much of the available space inside the flex container an item should take up; it assigns more or less space to flex items.

A flex-grow value of 1 expands flex items to take up the full space of a line.

container {display: flex}
items {flex-grow: 1}

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

The higher the flex-grow value, the more an item grows relative to the other items.

container {display: flex}
item-1 {flex-grow: 1} item-2 {flex-grow: 2;} item-3 {flex-grow: 1}

Item 1
Item 2
Item 3

container {display: flex}
item-1 {flex-grow: 4} item-2 {flex-grow: 1;}

Item 1
Item 2