# Flex Items — CSS

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

> Control how individual children grow, shrink, and reorder.

## 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

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