CSS Flex Items

While the parent "Flex Container" handles most of the layout, individual Flex Items can have their own rules to override or modify their specific behavior.

---

The order Property

The order property specifies the stack order of a flex item. By default, items have an order of 0. Higher numbers move items to the end, while lower numbers move them to the front.

.item-1 { order: 3; } /* Moves to the end */
.item-2 { order: 1; }

---

The flex-grow Property

Specifies how much a flex item will grow relative to the rest of the items. If all items have flex-grow: 1, they will be equal in size. If one item has flex-grow: 2, it will take up twice the extra space.

.main-content {
    flex-grow: 2; /* Takes up more available space */
}

---

The flex-basis Property

Specifies the initial length of a flex item before the remaining space is distributed. It's similar to width, but more flexible.

.sidebar {
    flex-basis: 200px;
}

---

The flex Shorthand

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.

.item {
    flex: 2 1 200px; /* grow, shrink, basis */
}

---

The align-self Property

Allows a single flex item to have a different vertical alignment than the rest of the items in the container (overriding the parent's align-items).

.special-item {
    align-self: flex-end; /* Sticks to the bottom specifically */
}

---

---