Chapter•90 Minutes

Items per page

Flexbox Deep Dive

Master one-dimensional layouts with flex containers, axes, alignment, sizing, wrapping, ordering, and real-world patterns.

Flex Container and Main Axis

Flexbox is a one-dimensional layout system. A flex container distributes its direct children along a main axis and cross axis.

display: flex creates the flex formatting context. flex-direction determines the main axis, while justify-content primarily operates along the main axis and align-items operates along the cross axis.

Flex Main and Cross Axes

Basic Flex Layout

.toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

💡 The toolbar distributes its children horizontally and centers them vertically.

Key Takeaways

Flexbox is primarily one-dimensional.
The main axis depends on flex-direction.

Knowledge Check

With `flex-direction: row`, which direction is the main axis?

Alignment with justify-content and align-items

justify-content distributes free space along the main axis. align-items aligns flex items on the cross axis. align-self overrides the cross-axis alignment for an individual item.

The exact physical direction depends on writing mode and flex-direction, so thinking in terms of main and cross axes is more robust than memorizing left/right behavior.

Flexbox Alignment

Centered Content

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

💡 When the default row direction is used, both axes are centered, producing a centered item.

Key Takeaways

justify-content works primarily on the main axis.
align-items works primarily on the cross axis.

Knowledge Check

In a default row flex container, which property primarily controls horizontal free-space distribution?

flex-grow, flex-shrink and flex-basis

The flex shorthand combines flex-grow, flex-shrink, and flex-basis.

flex-grow determines how an item can receive positive free space. flex-shrink determines how it can shrink when insufficient space exists. flex-basis establishes the initial main-size contribution before free-space distribution.

Understanding these three values is critical for avoiding mysterious width behavior.

Flex Sizing

Flexible Columns

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
}

💡 The sidebar remains approximately 240px while the content absorbs available space. min-width: 0 allows long content to shrink instead of forcing overflow.

Key Takeaways

flex-basis controls the initial main-size contribution.
flex: 1 is a common way to distribute available space.
min-width: 0 is frequently important inside flex layouts.

Knowledge Check

Which flex property controls an item's initial main-size contribution?

Wrapping and Gap

By default, flex items remain on one line. flex-wrap: wrap allows them to form multiple lines when necessary. The gap property provides consistent spacing between flex items without requiring margins.

Flexbox wrapping is useful for toolbars, tag lists, button groups, navigation items, and card rows where the number of items can change.

Flex Wrapping

Wrapping Card Row

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 280px;
}

💡 Cards attempt to use at least around 280px of basis and wrap when insufficient horizontal space remains.

Key Takeaways

flex-wrap allows items to move onto additional lines.
gap is cleaner than manually managing margins between items.

Knowledge Check

What does `flex-wrap: wrap` allow?

Real-World Flexbox Patterns

Flexbox is excellent for navigation bars, media objects, vertically centered components, button groups, toolbars, and layouts where content needs to distribute along one primary axis.

A common pattern is margin-inline-start: auto, which pushes an item toward the end of the main axis without requiring a hardcoded spacer.

Flexbox Navigation Pattern

Push an Item to the End

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav__actions {
  margin-inline-start: auto;
}

💡 Auto margin consumes available free space and pushes the actions to the end of the flex line.

Key Takeaways

Flexbox is ideal for one-dimensional component layouts.
Auto margins can be powerful alignment tools.

Knowledge Check

What effect can `margin-inline-start: auto` have inside a horizontal flex container?

Flex Container and Main Axis

Alignment with justify-content and align-items

flex-grow, flex-shrink and flex-basis

Wrapping and Gap

Real-World Flexbox Patterns

STAY UPDATED WITH BYTES!