# Flexbox responsive — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/flexbox-responsive

> Use Flexbox's flex-wrap and gap to create layouts that stack and reflow — simpler than Grid for linear layouts.

## Flex-wrap for mobile

By default, flexbox keeps items in a row. Add `flex-wrap: wrap` to allow items to wrap to the next line when space is tight. Combine with `flex: 1 1 auto` for flexible item sizing.

## Responsive card layout with Flexbox

Cards stack on small screens and expand on larger ones.

```css
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 calc(50% - 10px);
  min-width: 250px;
  background: white;
  padding: 16px;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .card { flex: 1 1 100%; }
}
```

## Flexbox vs Grid: when to use each

Use **Flexbox** for 1D layouts (rows or columns). Use **Grid** for 2D layouts (rows and columns). Flexbox is simpler for navigation, headers, footers. Grid is more powerful for full-page layouts.

## Flex grow and shrink on mobile

Control how items expand and contract on different screens.

```css
.flex-container { display: flex; gap: 1rem; }

.flex-item { flex: 1 1 100%; }

@media (min-width: 600px) {
  .flex-item { flex: 1 1 calc(50% - 0.5rem); }
}

@media (min-width: 1024px) {
  .flex-item { flex: 1 1 calc(25% - 0.75rem); }
}
```