CSS Flexbox: One-Dimensional Layout

CSS flexbox arranges a container's direct children along one main axis and aligns them along a cross axis. It handles navigation bars, button groups, card rows, form controls, and other layouts where content must share space in one direction. For the broader styling basics, start with the CSS fundamentals. This guide is part of our CSS layout guide series.

Picture a shelf whose books can change width. The shelf is the flex container, and its direct children are flex items. Container rules choose the shelf direction and alignment. Item rules decide which books can grow, which can shrink, and the size each one starts from.

What Does CSS Flexbox Control?

CSS flexbox controls the size, spacing, and alignment of a container’s direct children along a main axis and a cross axis. Set display: flex on the parent to make those children flex items. Their own contents keep their existing layout.

The main axis always follows the current flex-direction value. With row, it normally runs in the inline direction. With column, it runs in the block direction. The cross axis always runs perpendicular to the main axis, so changing direction also changes the physical direction controlled by the alignment properties.

Flexbox resolves positive and negative free space. When room remains on the shelf, flex-grow decides how items share it. When the items need more room than the container offers, flex-shrink decides how the deficit is removed. flex-basis supplies the starting main size before either calculation.

Build a Flex Layout Step by Step

This sequence keeps one topic-card example and adds one flexbox decision at each step. Replace the earlier CSS block as you proceed so the rendered change stays visible.

<section class="topic-list">
  <article class="topic-card">Selectors</article>
  <article class="topic-card">Flexbox with a longer title</article>
  <article class="topic-card">Grid</article>
  <article class="topic-card">Positioning</article>
</section>

Turn on Flexbox

.topic-list {
  display: flex;
}

The section becomes a flex container after this declaration. Its four articles become flex items and move into a single row because the initial direction is row. The items keep content-based widths, and the browser allows them to shrink when the row runs short of space.

Choose the Flex Direction

.topic-list {
  display: flex;
  flex-direction: row;
}

The explicit row keeps the main axis running across the container. Change the value to column and each card stacks vertically because the main axis turns downward. The shelf has rotated, so later main-axis alignment rotates with it.

Justify and Align the Items

.topic-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

justify-content: center groups the cards in the middle of the row when positive free space remains. align-items: stretch lets the cards fill the flex line's cross size, so cards with short labels can match the height of the card with a longer title.

If the direction changes to column, justification works vertically and alignment works horizontally. Property names describe the flex axes rather than fixed screen directions.

Set align-self on one flex item to give it different cross-axis alignment from the others. If wrapping creates several lines, align-content distributes those lines when the container has spare cross-axis space; align-items still aligns items within each line.

Add a Gap Between Items

.topic-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
}

The items remain centered while one rem of space appears between each pair. A container gap does not add space at the outer edges, and it keeps spacing separate from a card's own margins. When cards wrap later, the same gap also separates the flex lines.

Allow Items to Wrap

.topic-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  flex-wrap: wrap;
}

flex-wrap: wrap permits items to move onto another line when they cannot fit. Each new line distributes its free space independently, which is a defining flexbox behavior. Cards in separate lines do not share column tracks, even when their widths happen to match.

Control Grow, Shrink, and Basis

.topic-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  flex-wrap: wrap;
}

.topic-card {
  flex: 1 1 14rem;
  min-width: 0;
}

The shorthand reads as flex-grow: 1, flex-shrink: 1, and flex-basis: 14rem. Each card starts from a preferred main size of 14rem. Cards on the same line grow to share leftover room, can shrink when necessary, and wrap once the container cannot fit another reasonable card.

The min-width: 0 declaration lets the flex item shrink below its automatic minimum width. Its contents still need somewhere to go. Use wrapping for long words or scrolling for a code block so the content does not spill outside the smaller item.

Common Pitfalls & Debugging

Alignment Follows the Current Axes

justify-content: center moves items vertically when horizontal centering was expected. The container uses flex-direction: column, so the main axis is vertical. Identify the current main axis, then use justify-content for that axis and align-items for the cross axis.

Items Overflow Because of Min-width

A flex child pushes beyond the container even though shrinking is enabled. Flex items default to an automatic minimum size, and long unbroken content can set a large min-content width. Apply min-width: 0 to the shrinking flex item, then handle the content with wrapping or overflow rules appropriate to that content.

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

.main-panel pre {
  overflow-x: auto;
}

The panel may now shrink within the row, while the code block scrolls internally if a line cannot wrap. Apply the minimum-size fix to the flex item that participates in sizing, which may be a wrapper around the visibly overflowing element.

Flex: 1 Uses a Zero Basis

Several items become equal widths even though their content sizes differ. Browsers expand flex: 1 to a grow factor of one, a shrink factor of one, and a basis of 0%. Use flex: 1 1 auto when content or an authored width should contribute to the starting size, or write an explicit basis such as 14rem.

Avoid using order or reversed flex directions to repair confusing HTML order. They change the visual arrangement, while ordinary keyboard navigation and screen readers still follow the document order.

When Should You Use Grid Instead of Flexbox?

Use CSS grid instead of flexbox when items across several rows need shared column boundaries. Flexbox lays out each wrapped line independently, which suits content-driven rows but does not keep columns aligned between lines.

Use CSS grid when the layout needs shared row and column tracks, such as a dashboard or a gallery with aligned columns. A page can use grid for its outer structure and flexbox inside a toolbar, navigation region, or card header.

Start with the Main Axis

Start with the container's axes, then add alignment and wrapping before tuning item flexibility. When overflow appears, inspect the flex item's automatic minimum size before changing widths across the whole layout.

Frequently Asked Questions

How do justify-content and align-items differ in CSS flexbox?

In CSS flexbox, justify-content distributes free space along the main axis. align-items aligns items across the cross axis within each flex line. Changing flex-direction changes which physical direction each axis follows.

Why do flex items shrink even when a width is set?

Flex items use flex-shrink: 1 by default, so the flex algorithm can reduce their main size when the container lacks space. Set an appropriate flex value, allow wrapping, or use flex-shrink: 0 only when the item must keep its declared size.

What does flex: 1 1 auto mean?

CSS flex: 1 1 auto lets an item grow and shrink from its automatic starting size. The three values set flex-grow, flex-shrink, and flex-basis. With an auto basis, the starting size comes from the main-size property when set, or from the content.

How do you center an item horizontally and vertically with flexbox?

To center an item with CSS flexbox, set display: flex on its container, then set justify-content: center and align-items: center. The container needs spare space along an axis for centering to move the item on that axis.