Flexbox responsive

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.

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

.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); }
}