📦 Flex Container Properties

The Container Property Map

In the previous lesson you learned the Flexbox model — container, items, and the two axes. Now we focus entirely on the container: the parent element with display: flex. Its properties decide the direction items flow, whether they wrap, and how free space is distributed on both axes.

A useful way to remember them: display turns it on, flex-direction/flex-wrap set the flow, the three justify-*/align-* properties handle alignment, and gap handles spacing.

display: flex vs inline-flex

The display property is what creates the flex container in the first place. It has two flavors that differ only in how the container itself behaves in the surrounding document flow — not in how the items inside are laid out.

/* Block-level flex container */
.container {
  display: flex;
}

/* Inline-level flex container */
.badge-group {
  display: inline-flex;
}

Reach for flex for a main navigation bar that spans a header; reach for inline-flex for a small group of related buttons or badges that should flow inline with other content.

flex-direction

The flex-direction property sets the main axis — the direction items are placed and the meaning of "start" and "end". It takes four values:

.container { flex-direction: row; }            /* left to right (default) */
.container { flex-direction: row-reverse; }    /* right to left */
.container { flex-direction: column; }         /* top to bottom */
.container { flex-direction: column-reverse; } /* bottom to top */

A classic responsive move is stacking a nav vertically on mobile and switching it to a row on wider screens:

/* Mobile first: stacked */
.nav { display: flex; flex-direction: column; }

/* Wider screens: horizontal */
@media (min-width: 768px) {
  .nav { flex-direction: row; }
}

flex-wrap & flex-flow

By default, flex items are forced onto a single line and will shrink (or overflow) rather than wrap. The flex-wrap property changes that — it is the key to responsive layouts that reflow when space runs out.

.gallery {
  display: flex;
  flex-wrap: wrap;   /* fixed-width tiles reflow to new rows automatically */
  gap: 1rem;
}

The flex-flow property is a shorthand that sets flex-direction and flex-wrap together. The first value is the direction, the second is the wrap:

/* flex-direction: row; flex-wrap: wrap; */
.container { flex-flow: row wrap; }

/* flex-direction: column; flex-wrap: nowrap; */
.container { flex-flow: column nowrap; }

justify-content

justify-content distributes items along the main axis and controls what happens to leftover free space. It is the property you use to center a row, push items apart, or space them evenly.

.container { justify-content: flex-start; }    /* packed at the start (default) */
.container { justify-content: center; }        /* centered */
.container { justify-content: flex-end; }      /* packed at the end */
.container { justify-content: space-between; } /* first/last at edges, gaps between */
.container { justify-content: space-around; }  /* equal space around each item */
.container { justify-content: space-evenly; }  /* every gap, including edges, equal */

A frequent alternative to justify-content for "logo left, actions right" layouts is an auto margin on one item: margin-left: auto absorbs all the free space and pushes that item to the end. You'll use exactly that in this lesson's exercise.

align-items & align-content

These two are easy to confuse, so pin down the difference now: align-items aligns items within a line on the cross axis; align-content distributes multiple lines when the container has wrapped.

align-items — cross-axis alignment of items

This is how you get vertical centering in a row layout. Its values mirror justify-content but on the cross axis, plus two special ones:

.container { align-items: stretch; }     /* items fill the cross size (default) */
.container { align-items: flex-start; }  /* aligned to cross start */
.container { align-items: center; }      /* centered on the cross axis */
.container { align-items: flex-end; }    /* aligned to cross end */
.container { align-items: baseline; }    /* text baselines line up */

The baseline value is handy when items contain text at different sizes — it lines the type up along the reading baseline rather than the box edges. And the celebrated perfect-centering recipe is simply:

.hero {
  display: flex;
  justify-content: center;  /* horizontal (main axis)  */
  align-items: center;      /* vertical (cross axis)   */
  min-height: 100vh;
}

align-content — distributing wrapped lines

align-content only does something when there are multiple lines (so flex-wrap: wrap is on) and the container is taller than the lines need. It accepts flex-start, center, flex-end, space-between, space-around, and stretch (the default).

The gap Property

The gap property (with its longhands row-gap and column-gap) puts consistent space between flex items without adding space around the outer edges. It is the modern replacement for margins-on-every-child and is well supported in all current browsers.

/* Same gap in both directions */
.container { gap: 1rem; }

/* row-gap then column-gap */
.container { gap: 1rem 2rem; }

/* Individually */
.container { row-gap: 1rem; column-gap: 2rem; }

Here's a responsive dashboard grid that leans on wrap plus gap:

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

.widget {
  flex: 1 1 250px;   /* grow, shrink, min basis 250px */
}

Hands-on: A Three-Part Header

<header class="site-header">
  <div class="logo">MyApp</div>
  <nav class="primary-nav">
    <a href="#">Home</a>
    <a href="#">Products</a>
    <a href="#">About</a>
  </nav>
  <div class="user-actions">
    <a href="#">Log in</a>
    <a href="#">Profile</a>
  </div>
</header>

.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: #1e293b;
  color: #fff;
}

.primary-nav,
.user-actions {
  display: flex;
  gap: 1rem;
}

.user-actions {
  margin-left: auto;   /* push actions to the right edge */
}

@media (max-width: 768px) {
  .site-header { flex-direction: column; align-items: stretch; }
  .user-actions { margin-left: 0; }
}

Best Practices & Pitfalls

Summary & Quiz

📚 Further Reading

• MDN — Basic concepts of Flexbox
• CSS-Tricks — A Complete Guide to Flexbox
• MDN — the gap property

🚀 What's Next?

Container properties decide the overall flow. Next we flip to the other side of the relationship — the item properties (flex-grow, flex-shrink, flex-basis, align-self, and order) — that let individual children size and place themselves.