Items

Order

By default, the flex items appear in the same order as they are written in HTML. This can be changed using the order property for a specific item. The default value for this property is 0, which means items with a negative order value will appear before those without an order property specified, and those with positive will appear after.

#one {
    order: 2;
}
#two {
    order: -1;
}
#three {
    order: 1;
}

In this example, the order of the items would be: #two, #four, #five, #six, #three, #one.

Grow and Shrink

The flex-grow property allows items to expand to fill the container. It takes numbers as values, and the number specifies how much a particular item will grow relative to the others. For example, if all items have the flex-grow property set to 1, then they will all grow to the same size. An item with a flex-grow value of 2 will be twice as large as one with a value of 1.

The flex-shrink property is similar, but it specifies how items shrink if the container is too small. It also takes number inputs, but a larger number means the item shrinks more. So an item with a flex-shrink value of 2 will be twice as small as one with a value of 1.

Align-self

This property allows you to override the general align-items rule for specific items. Just like align-items, align-self controls how items are laid out along the cross-axis, and it accepts the same values: stretch, flex-start, flex-end, and center.