Flexbox Deep Dive

Difficulty: Intermediate

Question

Explain Flexbox in depth. What are the container vs item properties?

Answer

Flexbox is a 1-dimensional layout system for arranging items in rows or columns.

Container properties (on parent): - display: flex - flex-direction: row | column | row-reverse | column-reverse - justify-content: main axis alignment - align-items: cross axis alignment - flex-wrap: wrap | nowrap - gap: spacing between items

Item properties (on children): - flex-grow: how much to grow (0 = don't) - flex-shrink: how much to shrink (1 = default) - flex-basis: initial size before growing/shrinking - flex: shorthand (grow shrink basis) - align-self: override align-items for one item - order: change visual order

Code examples

Container Properties

.flex-container {
  display: flex;

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

  /* Main axis (horizontal in row) */
  justify-content: flex-start;
  /* center, flex-end, space-between,
     space-around, space-evenly */

  /* Cross axis (vertical in row) */
  align-items: stretch; /* default: fill height */
  /* center, flex-start, flex-end, baseline */

  /* Wrapping */
  flex-wrap: wrap; /* items wrap to next line */

  /* Multi-line cross axis */
  align-content: center;
  /* Only works with flex-wrap: wrap */

  /* Gap between items */
  gap: 1rem;
  /* row-gap: 1rem; column-gap: 2rem; */
}

justify-content controls the main axis (direction of flex-direction). align-items controls the cross axis (perpendicular to direction).

Item Properties and flex Shorthand

.item {
  /* flex shorthand: grow shrink basis */
  flex: 0 1 auto; /* default */

  flex: 1;       /* flex: 1 1 0% - grow equally */
  flex: auto;    /* flex: 1 1 auto - grow from content size */
  flex: none;    /* flex: 0 0 auto - no flex */
  flex: 0 0 200px; /* fixed 200px, no grow/shrink */
}

/* Grow: distribute extra space */
.sidebar { flex: 0 0 250px; } /* fixed 250px */
.content { flex: 1; }         /* takes remaining space */
.aside   { flex: 0 0 200px; } /* fixed 200px */

/* Self alignment */
.item-special {
  align-self: center; /* override container's align-items */
}

/* Reorder visually (not in DOM) */
.first-visually { order: -1; }
.last-visually  { order: 99; }

flex: 1 is the most common - items grow equally to fill space. flex: 0 0 <size> creates fixed-width items that don't flex.

Common Flexbox Patterns

/* Center anything */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navbar: logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Equal height cards */
.card-row {
  display: flex;
  gap: 1rem;
}
.card {
  flex: 1; /* equal width, equal height */
}

/* Footer at bottom of page */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page main { flex: 1; } /* pushes footer down */

/* Responsive cards with wrapping */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.grid .card {
  flex: 1 1 300px; /* min 300px, grow to fill */
}

These patterns cover 90% of Flexbox use cases. The sticky footer pattern with flex-direction: column and flex: 1 on main is extremely common.

Key points

• flex: 1 means flex: 1 1 0% (grow, shrink, zero basis)
• gap works in Flexbox (not just Grid) in all modern browsers
• Flex items cannot use float or clear

Concepts covered

Flexbox, Flex Container, Flex Items, Alignment, Wrapping, Ordering