# Flexbox essentials
URL: https://wwadd.dev/moves/css/flexbox-essentials

Flex works on one axis at a time. Set `flex-direction` first, then reason about `justify-content` (main axis) and `align-items` (cross axis). `gap` replaces margin hacks.


```css
.row {
  display: flex;
  flex-direction: row;   /* main axis = horizontal */
  justify-content: space-between; /* along main axis */
  align-items: center;   /* across the other axis */
  gap: 1rem;
  flex-wrap: wrap;
}

.grow { flex: 1 1 0; }   /* fill remaining space */
.fixed { flex: 0 0 240px; }
```

## Related Moves
- [Grid essentials](https://wwadd.dev/moves/css/grid-essentials)
- [Center anything](https://wwadd.dev/moves/css/center-anything)