# Flex Items — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

Source: https://www.skillbyai.com/en/css/css-flex-items

> Control how flex items grow, shrink, align and reorder with flex, align-self and order.

## grow, shrink, basis

`flex-grow` how much extra space a item takes, `flex-shrink` how much it shrinks when space is tight, `flex-basis` its starting size. `flex: 1` is shorthand for `1 1 0%` — "share space equally".

## Equal-width columns

Each `.col` grows to fill available space equally.

```css
.row { display: flex; gap: 16px; }
.col { flex: 1; }
.col.wide { flex: 2; }   /* takes twice the space */
```

## align-self & order

`align-self` overrides the container's `align-items` for one item. `order` changes visual order without touching the HTML.

**Quiz:** Which property controls how much a flex item grows to fill extra space?

- [ ] flex-shrink
- [ ] flex-basis
- [x] flex-grow
- [ ] flex-wrap

*Answer:* flex-grow. flex-grow decides how leftover space is distributed among items.