body {
  font-family: sans-serif; /* keeps labels readable */
  background-color: #1a1a1a; /* dark background so the colored boxes pop */
  color: #eee; /* light text on dark background */
  padding: 2rem; /* breathing room around the whole page */
}

h2 {
  margin-top: 2.5rem; /* space above each section title */
  margin-bottom: 0.5rem; /* tighter space below, closer to its demo */
  color: #7fd1ff; /* light blue to separate titles from body text */
}

p.label {
  font-size: 0.9rem; /* smaller than body text, it's a caption not content */
  color: #aaa; /* dimmed so it doesn't compete with the boxes */
  margin-bottom: 0.5rem; /* small gap before the demo box starts */
}

.demo-row {
  display: flex; /* lays out several mini flex-containers side by side for comparison */
  gap: 2rem; /* space between the mini-containers */
  flex-wrap: wrap; /* lets the row wrap on narrow screens instead of overflowing */
}

.box {
  border: 2px solid #444; /* outlines each flex-container so you can see its edges */
  padding: 1rem; /* space inside each flex-container, around the items */
  background-color: #222; /* slightly lighter than page background, marks the container boundary */
}

.item {
  background-color: #ff6b6b; /* red items are the ones being positioned/sized — the thing you're watching move */
  padding: 0.75rem; /* space inside each item so the number isn't cramped */
  margin: 0.25rem; /* tiny gap between items so touching edges are visible */
  color: #1a1a1a; /* dark text readable against the red background */
  font-weight: bold; /* makes the item numbers easy to scan */
  display: flex; /* used ONLY to center the number inside each item */
  align-items: center; /* centers number vertically inside the item */
  justify-content: center; /* centers number horizontally inside the item */
}

/* SECTION 1: flex-direction — controls which way the main axis runs */
.direction-row {
  display: flex; /* THE property being demoed */
  flex-direction: row; /* items line up left-to-right (default) */
  width: 200px;
  height: 120px;
}
.direction-row .item { width: 40px; height: 40px; }

.direction-column {
  display: flex; /* THE property being demoed */
  flex-direction: column; /* items stack top-to-bottom instead */
  width: 200px;
  height: 120px;
}
.direction-column .item { width: 40px; height: 40px; }

/* SECTION 2: justify-content — controls spacing along the main axis */
.justify-demo {
  display: flex; /* THE property being demoed */
  width: 260px;
  height: 80px;
}
.justify-demo .item { width: 40px; height: 40px; }
.jc-start   { justify-content: flex-start; }   /* items pushed to the start, no gap between them */
.jc-end     { justify-content: flex-end; }     /* items pushed to the end */
.jc-center  { justify-content: center; }       /* items clumped in the middle */
.jc-between { justify-content: space-between; }/* equal gaps BETWEEN items, none at the edges */
.jc-around  { justify-content: space-around; } /* equal gaps AROUND each item, so edges get half-gaps */

/* SECTION 3: align-items — controls positioning along the cross axis (perpendicular to main axis) */
.align-demo {
  display: flex; /* THE property being demoed */
  width: 220px;
  height: 100px; /* taller box so vertical alignment is actually visible */
}
.align-demo .item { width: 40px; height: 30px; } /* shorter items than the container, so alignment shows */
.ai-start  { align-items: flex-start; }  /* items stick to the top */
.ai-center { align-items: center; }      /* items centered vertically */
.ai-end    { align-items: flex-end; }    /* items stick to the bottom */

/* SECTION 4: flex-wrap — controls whether items are forced onto one line or allowed to wrap */
.wrap-demo {
  display: flex; /* THE property being demoed */
  flex-wrap: wrap; /* items that don't fit spill onto a new line instead of shrinking or overflowing */
  width: 220px; /* deliberately too narrow to fit all 6 items on one line */
}
.wrap-demo .item { width: 60px; height: 40px; }

/* SECTION 5: flex-grow — controls how items divide up leftover space */
.grow-demo {
  display: flex; /* THE property being demoed */
  width: 300px;
  height: 60px;
}
.grow-demo .item:nth-child(1) { flex-grow: 1; } /* takes 1 share of leftover space */
.grow-demo .item:nth-child(2) { flex-grow: 2; } /* takes 2 shares — ends up twice as wide as item 1 */
.grow-demo .item:nth-child(3) { flex-grow: 1; } /* takes 1 share, same as item 1 */