# Common Flex Patterns — CSS

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

> Navbars, equal-height cards, and centering — the patterns you'll write daily.

## Navbar with space-between

Logo on the left, links on the right, one rule.

```css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
}
```

## Equal-height cards

Flex items stretch to match the tallest sibling by default — no extra CSS needed.

```css
.cards {
  display: flex;
  gap: 16px;
  align-items: stretch;  /* default */
}
.card {
  flex: 1;
  padding: 16px;
}
```

## The centering one-liner

`display: flex; justify-content: center; align-items: center;` centers anything, of any size, perfectly.