← Back to Home

Flexbox Mastery

Stop guessing, start aligning. Master flex properties for perfect layouts.

← Previous: Layout Methods Next: CSS Grid Layouts →

Flexbox is the most powerful tool for creating flexible, responsive layouts. Master flex-direction, justify-content, align-items, and more.

Direction Justify Content Align Items Flex Grow/Shrink Gap

flex-direction

Controls the direction items flow. Use row (default), column, row-reverse, or column-reverse. 

.container {
  display: flex;
  flex-direction: row; /* row, column, row-reverse, column-reverse */
}

.item {
  flex: 1;
}

Try it - Toggle Direction

1
2
3

justify-content

Aligns items along the main axis. Options: flex-start, flex-end, center, space-between, space-around, space-evenly. 

.container {
  display: flex;
  justify-content: center;
  /* flex-start, flex-end, center, space-between, space-around, space-evenly */
}

Try it - Toggle Justify Content

A
B
C

align-items

Aligns items along the cross axis. Options: flex-start, flex-end, center, stretch, baseline. 

.container {
  display: flex;
  align-items: center;
  height: 200px;
  /* flex-start, flex-end, center, stretch, baseline */
}

Try it - Toggle Align Items

A
B
C

flex-grow & flex-shrink

flex-grow makes items expand to fill space. flex-shrink controls how much they shrink. Use shorthand flex: 1 for equal growth. 

.container {
  display: flex;
  gap: 1rem;
}

.item {
  flex: 1; /* shorthand for grow: 1, shrink: 1 */
}

.item.large {
  flex: 2; /* grows twice as much */
}

Try it - See how flex ratio works

flex: 1
flex: 2
flex: 1

gap Property

gap creates space between flex items. Much cleaner than margins! Supported in all modern browsers. 

.container {
  display: flex;
  gap: 1rem; /* row gap and column gap */
  gap: 1rem 2rem; /* row gap, column gap */
}

Try it - Items with gap

Item 1
Item 2
Item 3
Item 4

Flexbox Properties Quick Reference

Property Values Purpose
display flex Enable flexbox on container
flex-direction row, column, row-reverse, column-reverse Direction of flex items
justify-content flex-start, center, flex-end, space-between, etc. Align items on main axis
align-items flex-start, center, flex-end, stretch Align items on cross axis
flex 1, 2, etc. Shorthand for grow, shrink, basis
gap 1rem, 1rem 2rem Space between items

Summary

  • Start with display: flex to enable flexbox on any container.
  • flex-direction sets the main axis (row or column).
  • justify-content aligns items along the main axis.
  • align-items aligns items along the cross axis.
  • flex: 1 makes items grow equally and shrink proportionally.
  • gap creates consistent spacing without margin hacks.
← Previous: Layout Methods Next: CSS Grid Layouts →