Flexbox

/* Flexbox container properties */
.flex-container {
  display: flex;

  /* Direction */
  flex-direction: row;            /* left to right (default) */
  flex-direction: row-reverse;    /* right to left */
  flex-direction: column;         /* top to bottom */
  flex-direction: column-reverse;

  /* Wrapping */
  flex-wrap: nowrap;  /* all on one line (default) */
  flex-wrap: wrap;    /* wrap to next line if needed */

  /* Shorthand */
  flex-flow: row wrap;

  /* Alignment on main axis (row = horizontal, column = vertical) */
  justify-content: flex-start;     /* pack at start */
  justify-content: flex-end;       /* pack at end */
  justify-content: center;         /* center */
  justify-content: space-between;  /* even gaps, no outer gaps */
  justify-content: space-around;   /* even gaps with outer gaps */
  justify-content: space-evenly;   /* all gaps equal */

  /* Alignment on cross axis */
  align-items: stretch;     /* fill container height (default) */
  align-items: flex-start;  /* align to top */
  align-items: flex-end;    /* align to bottom */
  align-items: center;      /* center vertically */

  /* Gap between items */
  gap: 16px;           /* row and column gap */
  gap: 8px 16px;       /* row-gap column-gap */
}

/* Flex item properties */
.flex-item {
  flex-grow: 1;    /* how much to grow to fill space (0 = don't grow) */
  flex-shrink: 1;  /* how much to shrink (0 = don't shrink) */
  flex-basis: 200px; /* initial size before growing/shrinking */
  flex: 1;         /* shorthand: grow=1 shrink=1 basis=0 */

  align-self: center; /* override align-items for this item */
  order: 2;           /* control order (default 0) */
}

/* Common Flexbox patterns */

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

/* Card grid that wraps */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

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

/* THE classic center-everything */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* full viewport height */
}

/* Sidebar layout */
.layout {
  display: flex;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;  /* don't shrink the sidebar */
}

.main-content {
  flex: 1;  /* take all remaining space */
  min-width: 0;  /* prevent overflow in flex children */
}