Flex items

Properties applied to child items defines how they are ordered and resized within the container

Ordering

Assigning an order to child items will override the order in the source code. It should be noted that as in the example, any nth-child CSS styles will still respect the order in the DOM

.item {
    order: <integer>;
}

Flex grow

.item {
    flex-grow: <integer>;
}

Flex grow allows items to grow to fill space, it is relative: an item with flex-grow: 2 will grow twice as much as one with flex-grow: 1

Flex shrink

.item {
    flex-shrink: <integer>;
}

The opposite of flex grow, this defines if items will shrink, and how much by. Unlike flex grow which defaults to 0, items in a flex container will shrink by default