Flexbox Layout

🎨 CSS Layout Lesson 8 Intermediate

Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space and aligns items along a single axis (row or column). It replaced most float-based hacks and is now the go-to tool for component-level layout.

1 Container Properties

CSS — Flex Container

.container {
  display: flex;

  /* Main axis direction */
  flex-direction: row;           /* row | column | row-reverse | column-reverse */

  /* Wrap onto multiple lines? */
  flex-wrap: wrap;               /* wrap | nowrap */

  /* Alignment on main axis */
  justify-content: space-between;/* flex-start | center | flex-end | space-around */

  /* Alignment on cross axis */
  align-items: center;           /* flex-start | flex-end | stretch | baseline */

  /* Multi-line cross-axis alignment */
  align-content: flex-start;

  gap: 16px;                     /* space between items */
}

2 Item Properties

CSS — Flex Items

.item {
  flex-grow: 1;     /* absorb extra space (0 = don't grow)  */
  flex-shrink: 0;   /* don't shrink below flex-basis         */
  flex-basis: 200px;/* ideal starting size                   */
  /* shorthand: flex: grow shrink basis */
  flex: 1 0 200px;

  align-self: flex-end; /* override container's align-items */
  order: 2;             /* reorder visually (not in DOM)     */
}

3 Common Patterns

CSS — Flex Patterns

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

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

/* Auto-fill card grid */
.cards { display: flex; flex-wrap: wrap; gap: 20px; }
.card  { flex: 1 1 280px; }   /* grow, shrink, min 280px */

4 Code Challenge

Challenge: Build a responsive card row using display: flex; flex-wrap: wrap;. Each card should have flex: 1 1 250px so they fill the row but wrap to the next line on small screens.