Introduction to Flexbox — display: flex and the Flex Container

One CSS declaration changes everything: display: flex. Applied to a parent element, it turns that element into a flex container and activates an entirely different layout system for its children. This lesson covers what that declaration does and why the container/item distinction is the most important concept in Flexbox.

The flex container and flex items

When you write display: flex on an element, two things happen simultaneously:

1. That element becomes a flex container — it now controls the layout of its direct children using Flexbox rules.
2. Its direct children become flex items — they are arranged by the container’s Flexbox rules.

<nav class="site-nav">
  <a href="/">Home</a>
  <a href="/tours">Tours</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

.site-nav {
  display: flex;
}

After this single declaration, the four <a> elements — previously block elements that stacked vertically (or inline elements that flowed awkwardly) — line up in a horizontal row. That is what display: flex does by default.

What happens when you apply display: flex

Before Flexbox, the <a> elements inside <nav> behave according to their display type. After display: flex on the container:

• Flex items line up along a row (left to right) by default
• Flex items shrink to fit their content rather than taking the full width of the container
• The container itself remains a block-level element — it still occupies a full row in normal flow from the outside

That last point matters: display: flex changes how the container arranges its children, not how the container itself behaves in the page layout.

Flex items are direct children only

Flexbox only applies one level deep. Given this HTML:

<ul class="tours-grid">
  <li class="tour-card">
    <h2>Mount Rainier</h2>
    <p>A classic summit route.</p>
  </li>
  <li class="tour-card">
    <h2>Olympic Peninsula</h2>
    <p>Old-growth rainforest.</p>
  </li>
</ul>

.tours-grid {
  display: flex;
}

The .tour-card list items are flex items — they line up in a row. The <h2> and <p> inside each card are not flex items. They are still children of .tour-card, which has not had display: flex applied. Normal flow still governs them.

If you wanted the content inside each card to also use Flexbox, you would apply display: flex to .tour-card separately.

display: inline-flex

display: inline-flex works like display: flex, but the container behaves as an inline element rather than a block element:

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

Use inline-flex when you want a flex container that flows inline with surrounding text — for icon + label combinations, status badges, or inline buttons. For most layout purposes (navbars, card grids, page sections), display: flex is what you want.

The default flex behavior

Without any additional Flexbox properties, a flex container has these defaults:

Property	Default	Effect
flex-direction	row	Items flow left to right
flex-wrap	nowrap	All items stay on one line
justify-content	flex-start	Items packed at the start of the row
align-items	stretch	Items stretch to fill the container’s height

This means display: flex alone gives you a horizontal row of items that are all the same height as the tallest item — a very useful starting point for navbars and card rows.

Exercise

Apply display: flex to the STO site’s navigation and tour card section:

1. Open style.css. Add this rule for the site navigation:

.site-nav {
  display: flex;
}

2. Open the browser and look at the navigation. The links should now appear in a horizontal row. (They are still packed at the left — spacing and alignment come in later lessons.)

3. Add display: flex to the tour card container:

.tours-grid {
  display: flex;
}

4. The tour cards should now appear side by side. Depending on their content width, they may look cramped or overflow the viewport — that is expected. Later lessons will add flex-wrap and sizing to fix this.

5. In DevTools, click on .site-nav and look at the Styles panel. You will see display: flex listed. In the Elements panel, you will see a “flex” badge appear next to the element — click it to open Chrome’s Flexbox inspector, which shows the main axis and cross axis as overlays.

Recap

• display: flex turns an element into a flex container and its direct children into flex items.
• The flex container controls layout of its children; the container itself remains a block element from the outside.
• Flexbox applies only one level deep — grandchildren are not flex items unless you apply display: flex to their parent.
• Default behavior: items line up in a row, all the same height as the tallest item, packed at the start.
• display: inline-flex is the inline variant — the container flows with text instead of occupying a full row.

Lesson 03 introduces flex-direction and the main axis vs cross axis — the model that makes every other Flexbox property make sense.