Explain the CSS Flexbox axis model and how to solve common layout challenges with it.

CSS Flexbox is a one-dimensional layout system for distributing space and aligning items within a container. Understanding the axis model is the key to mastering Flexbox — everything revolves around the main axis and cross axis.

The Two Axes

• Main axis — the direction items are laid out, controlled by flex-direction:

  • row (default): left → right
  • row-reverse: right → left
  • column: top → bottom
  • column-reverse: bottom → top

• Cross axis — perpendicular to the main axis. If main axis is horizontal (row), cross axis is vertical, and vice versa.

Alignment Properties

| Property | Axis | Applied to | Controls | |----------|------|-----------|----------| | justify-content | Main | Container | Distribution of items along main axis | | align-items | Cross | Container | Alignment of items along cross axis | | align-self | Cross | Individual item | Override align-items for one item | | align-content | Cross | Container | Distribution of wrapped lines (multi-line only) | | gap | Both | Container | Space between items |

justify-content values: flex-start, flex-end, center, space-between, space-around, space-evenly

align-items values: stretch (default), flex-start, flex-end, center, baseline

The flex Shorthand

flex is shorthand for flex-grow, flex-shrink, and flex-basis:

• flex-grow — How much an item should grow relative to siblings when extra space is available (default: 0 = don't grow)
• flex-shrink — How much an item should shrink when space is insufficient (default: 1 = shrink equally)
• flex-basis — The initial size before growing/shrinking (default: auto = use content size or width/height)

Common patterns:

• flex: 1 = flex: 1 1 0% — Item takes equal share of available space
• flex: auto = flex: 1 1 auto — Item grows/shrinks from its content size
• flex: none = flex: 0 0 auto — Item doesn't grow or shrink (fixed size)

flex-wrap

flex-wrap: wrap allows items to flow onto multiple lines when they don't fit on one line. Combined with flex-basis, this creates responsive grid-like layouts without media queries:

.container { display: flex; flex-wrap: wrap; gap: 1rem; }
.item { flex: 1 1 300px; } /* Each item is at least 300px, grows to fill */

Common Layout Patterns

1. Perfect centering — display: flex; justify-content: center; align-items: center;
2. Sticky footer — flex-direction: column; min-height: 100vh; with flex: 1 on main content
3. Equal-height columns — align-items: stretch (the default)
4. Navigation bar — Logo left, links right: justify-content: space-between
5. Card grid — flex-wrap: wrap with flex-basis for minimum card width

Flexbox vs Grid

• Flexbox — one-dimensional (row OR column). Best for: navigation bars, toolbars, card rows, centering, flexible inline layouts.
• Grid — two-dimensional (rows AND columns). Best for: page layouts, data grids, complex dashboards, overlapping elements.

Use Flexbox for components and linear arrangements. Use Grid for page-level structure and 2D layouts.