CSS Flexbox | Quotes

What you'll learn

Understand flex container and flex item relationships

Control main-axis alignment with justify-content

Control cross-axis alignment with align-items and align-self

Use flex-grow, flex-shrink, and flex-basis for flexible sizing

Create responsive layouts without media queries using flex-wrap

Order and reorder items visually without changing HTML structure

Flexbox is a one-dimensional layout model for distributing space and aligning items.

Container Properties

.flex-container {
  display: flex;
  flex-direction: row; /* row | column */
  justify-content: center; /* main axis alignment */
  align-items: center; /* cross axis alignment */
  flex-wrap: wrap; /* allow wrapping */
  gap: 16px; /* space between items */
}

Item Properties

.flex-item {
  flex: 1; /* grow + shrink + basis */
  align-self: center; /* override align-items */
  order: 2; /* visual order */
}

Common Patterns

Centered Content

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Card Grid

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card-grid > * {
  flex: 1 1 300px; /* grow, shrink, min-width */
}

Next Steps

CSS Grid — Two-dimensional layouts
Tailwind Flexbox — Flexbox in Tailwind

Key Takeaways

Flexbox excels at one-dimensional layouts (rows or columns, not both simultaneously)

justify-content controls alignment along the main axis while align-items controls the cross axis

flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% — items share available space equally

flex-wrap: combined with fixed-width items creates responsive layouts without media queries

The gap property provides consistent spacing between flex items without margin tricks

align-self overrides align-items for individual flex items