Flexbox Layout — Complete Guide

Controlling the Row (or Column)

• display: flex — turns on flexbox for direct children
• flex-direction: row | column
• justify-content: center | space-between | flex-end — main axis
• align-items: center | flex-start | stretch — cross axis
• gap: 16px — spacing between items, no margin hacks needed
• flex-wrap: wrap — allow items to wrap onto new lines

Item Properties

• flex: 1 — grow to fill available space
• flex: 0 0 auto — fixed size, never grow or shrink

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

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

.card {
  flex: 1;
  min-width: 280px;
}