Flexbox Layout

.flex-container {
  display: flex;
  
  /* Direction */
  flex-direction: row;        /* row, column, row-reverse */
  
  /* Wrapping */
  flex-wrap: wrap;            /* wrap, nowrap */
  
  /* Main axis alignment */
  justify-content: center;    /* flex-start, center, space-between, space-around */
  
  /* Cross axis alignment */
  align-items: center;        /* flex-start, center, stretch */
  
  /* Gap between items */
  gap: 1rem;
}

/* Centered content */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Card grid */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.card {
  flex: 1 1 300px;  /* Grow, shrink, basis */
}