Flex Containers: Turning a Stacked List Into a Row

Your GitHub and LinkedIn links sit side by side now, but inline-block only works because each one is small, sized to its own text. Your Skills list is a different shape: three items you want lined up in one row, not stacked one under another. This lesson introduces flexbox, a layout tool built for exactly that.

The concept

Here is your page as it stands, buttons and all. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

Look at Skills. Three items, each still on its own line, exactly like every list you have built so far. Here are the same three items, stripped down to plain boxes with no list markup at all. Run it.

THREE CARDS, STACKED ONE UNDER ANOTHER · HTML

Untitled

RUN TO SEE YOUR PAGE

Three boxes, stacked one under another. Block elements always behave this way, one full-width line at a time, unless something tells them otherwise. Now watch what one new rule, on their parent, does to that same stack. Run it.

THE SAME THREE CARDS, NOW IN A ROW · HTML

Untitled

RUN TO SEE YOUR PAGE

Same three boxes, same text, same order. This time they sit side by side in a single row. The only change was one property, display: flex, and it was set on the wrapping div, not on any of the three boxes themselves. That wrapping element is now a flex container. Its direct children, the three boxes, automatically became flex items, arranged in a row without a display value of their own.

A flex container can also stack its items vertically, on purpose. Run this.

THE SAME CONTAINER, TOLD TO STACK INSTEAD · HTML

Untitled

RUN TO SEE YOUR PAGE

The three boxes stack again, but for a different reason than the very first demo. This container is still display: flex. It was told flex-direction: column, so its items line up top to bottom instead of left to right.

Apply the same idea to your real Skills list. Run it.

YOUR REAL SKILLS LIST, IN A ROW · HTML

Untitled

RUN TO SEE YOUR PAGE

Same three skills, same ul and li elements from every earlier lesson. One rule on the ul turns it into a flex container. Its li elements, now flex items, line up as a row of cards instead of a stacked list.

The syntax

Turning an element into a flex container takes one property.

.row {
  display: flex;
}

Only the container's own direct children become flex items. A grandchild nested one level deeper, inside one of those children, is not a flex item, and this rule does not reach it at all.

flex-direction sets which way those items line up.

.row {
  flex-direction: column;
}

row is the default value. A flex container lines its items up left to right the moment you set display: flex, with no flex-direction line required. Write flex-direction: column only when you want the items stacked top to bottom instead.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flex container</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="row">
      <div class="card">HTML</div>
      <div class="card">CSS</div>
      <div class="card">JavaScript</div>
    </div>
  </body>
</html>

styles.css

.row {
  display: flex;
}
.card {
  background-color: rgb(237, 242, 244);
  padding: 1rem;
  margin-right: 1rem;
}

One container, one display value, three cards in a row instead of three lines stacked on top of each other.

Common mistakes

You add display: flex; to .skill-card, expecting the three skills to line up in a row. They stay stacked, one per line, exactly as before. Run it:

DISPLAY: FLEX ON THE CARD INSTEAD OF THE ROW · HTML

Untitled

RUN TO SEE YOUR PAGE

display: flex only changes how an element treats its own children. Set on an li, it would only affect something nested inside that li, and here nothing is. The li itself is still a plain item inside a plain ul, stacking the way it always has. The property belongs on the parent, the ul, not on the items inside it.

You add display: flex; to #skills, the whole section, expecting the three skills to line up in a row. The heading and the list sit side by side instead, and the three skills inside the list are still stacked. Run it:

DISPLAY: FLEX ON THE WHOLE SECTION INSTEAD OF THE ROW · HTML

Untitled

RUN TO SEE YOUR PAGE

#skills's direct children are the h2 and the ul, so those two become the flex items, sitting side by side. The li elements are children of the ul, one level further down, so they stay exactly as they were. Flex reaches one level only: a container's own direct children, never further.

Try it yourself

Your Skills list still stacks one item per line. Turn it into a row of cards. After each Run, scroll the preview to Skills if you do not see it yet. The header and About sit above it, so the cards can land below the fold.

Run the starting code below. Scroll the preview to Skills if you do not see it yet. Confirm your three skills still stack vertically, one per line.
In index.html, add class="skill-row" to the Skills section's <ul>, and add class="skill-card" to each of its three <li> elements.
In styles.css, add .skill-row { display: flex; }. Run it. Scroll to Skills. Confirm the three skills now sit in a row instead of a column.
Add a .skill-card rule with background-color: white; and padding: 0.75rem 1rem;. Run it. Scroll to Skills. Confirm each skill now looks like its own card, sitting inside the grey panel.
Add margin-right: 1rem; to .skill-card. Run it. Scroll to Skills. Confirm visible space now separates each card from the next.
Break it on purpose: move display: flex; off .skill-row and onto .skill-card instead. Run it. Scroll to Skills. Confirm the skills fall back into a stacked column, even though a display: flex; rule still sits right there in your CSS.
Fix it: move display: flex; back onto .skill-row, and remove it from .skill-card. Run it. Scroll to Skills. Confirm the row returns.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your Skills section now shows a row of cards instead of a stacked list, built from three small CSS rules. The next lesson controls the space and alignment inside that row: justify-content, align-items, and gap.