InnoMarts logo
InnoMarts
Fast websites
← Back to course

Flexbox Layout

Flexbox Layout

Welcome back.

In the previous lesson, you learned the box model.

Content.

Padding.

Border.

Margin.

The great family of boxes.

Now we learn how to place those boxes nicely on the page.

This is where Flexbox enters.

Flexbox is one of the most useful layout tools in CSS.

It helps you align elements in rows or columns.

It helps you center things.

It helps you create navigation bars, cards, buttons, sections, and layouts without losing your mind completely.

Only partially.

This is still CSS.

What You’ll Learn

In this lesson, you’ll learn:

What Is Flexbox?

Flexbox means Flexible Box Layout.

It is a CSS layout system designed to arrange elements in one direction.

That direction can be:

A row goes left to right.

A column goes top to bottom.

Flexbox is perfect when you want to align items neatly.

For example:

Before Flexbox, centering things in CSS felt like trying to convince a cat to follow instructions.

Possible?

Maybe.

Pleasant?

No.

Create the Project

Create a folder for this lesson:

mkdir css-lesson5
cd css-lesson5
touch index.html
touch style.css

You should have:

css-lesson5/
  index.html
  style.css

Open the folder in your editor.

We will build a small landing page with navigation and cards.

This is a good Flexbox exercise.

Simple.

Practical.

Not a mysterious CSS labyrinth.

At least not today.

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <h1 class="logo">FlexSite</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Projects</a>
        <a href="#">Contact</a>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-text">
        <h2>Learn Flexbox Without Panic</h2>
        <p>Flexbox helps you align and organize elements with less chaos and fewer dramatic sighs.</p>
        <a href="#" class="button">Start Learning</a>
      </div>

      <div class="hero-box">
        <p>display: flex;</p>
      </div>
    </section>
  </header>

  <main class="page">
    <section class="cards">
      <article class="card">
        <h2>Align</h2>
        <p>Place items exactly where you want them.</p>
      </article>

      <article class="card">
        <h2>Distribute</h2>
        <p>Control the space between elements.</p>
      </article>

      <article class="card">
        <h2>Organize</h2>
        <p>Create clean rows and columns.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Created while learning CSS Flexbox.</p>
  </footer>
</body>
</html>

This page has:

Perfect for Flexbox practice.

Now we need to make the layout behave.

Politely, if possible.

Start with Basic Styles

Open style.css and add:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

This gives us:

Good foundation.

A bad foundation makes layout painful.

Like building a website on wet spaghetti.

Create a Flex Container

To use Flexbox, you add:

display: flex;

to a container.

Example:

.navbar {
  display: flex;
}

The container becomes a flex container.

The direct children inside it become flex items.

In this case:

<nav class="navbar">
  <h1 class="logo">FlexSite</h1>
  <div class="nav-links">...</div>
</nav>

.navbar is the flex container.

.logo and .nav-links are flex items.

Add this:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

Now the logo and links sit on one line.

The logo goes left.

The links go right.

Flexbox is already doing useful work.

Suspiciously useful.

But we accept.

Flex Direction

The flex-direction property controls the main direction.

Default value:

flex-direction: row;

That means items go left to right.

You can also use:

flex-direction: column;

That means items go top to bottom.

Example:

.hero {
  display: flex;
  flex-direction: row;
}

This places hero children side by side.

Add this:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

Now the hero text and hero box sit next to each other.

Much better than two sad blocks stacked with no plan.

justify-content

justify-content controls alignment on the main axis.

If flex-direction is row, the main axis is horizontal.

Common values:

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

In the navbar, we used:

justify-content: space-between;

This pushes items apart.

Logo left.

Links right.

Like a good navigation bar that knows its job.

In the hero, we also used:

justify-content: space-between;

This creates space between text and the box.

Flexbox is basically organizing the furniture.

Finally, somebody in CSS is acting like an adult.

align-items

align-items controls alignment on the cross axis.

If flex-direction is row, the cross axis is vertical.

Common values:

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;

We used:

align-items: center;

This vertically centers items.

Very useful.

Very common.

Very satisfying.

Centering things used to be a CSS horror story.

Flexbox made it much less dramatic.

Not completely drama-free.

But less dramatic.

gap

The gap property creates space between flex items.

Example:

.nav-links {
  display: flex;
  gap: 20px;
}

Add this:

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Now the navigation links have clean spacing.

No need to add margin to every link.

No tiny spacing battles.

No “why is the last item weird?” problem.

gap is beautiful.

CSS sometimes gives us gifts.

Rare, but real.

Style the Header and Hero

Add these styles:

.site-header {
  background-color: #111827;
  color: white;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

Now the hero looks more like a real section.

The button is rounded.

The text is readable.

The layout is structured.

Nobody is crying.

Excellent progress.

Centering with Flexbox

Flexbox is famous for centering.

To center something horizontally and vertically:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

Add this:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

Now the text inside .hero-box is centered perfectly.

This is one of the most useful Flexbox patterns.

A small miracle.

No ancient ritual required.

No CSS candles.

No sacrificing a keyboard.

Cards with Flexbox

Now style the card section.

Add:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Important part:

.card {
  flex: 1;
}

This tells each card to take equal available space.

Three cards.

Same width.

Clean layout.

No calculator needed.

CSS does the math.

Try not to look too shocked.

The flex Property

The flex property controls how flex items grow or shrink.

This:

flex: 1;

means:

Let this item grow and share available space equally.

If all cards have flex: 1, they become equal width.

Example:

.card {
  flex: 1;
}

This is very useful for cards, columns, and sections.

But do not use flex: 1 everywhere blindly.

CSS tools are powerful.

A hammer is useful.

But you do not brush your teeth with it.

Footer

Add:

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Simple footer.

No drama.

Sometimes that is the best kind of footer.

Complete CSS

Your style.css should look like this:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Save.

Refresh.

Your page should now have:

That is Flexbox doing its job.

Quietly powerful.

Like a developer who fixed production and did not brag.

Rare creature.

Common Mistakes

Adding display flex to the wrong element

Flexbox works on direct children.

If you write:

.card {
  display: flex;
}

that affects the children inside .card.

It does not arrange the cards themselves.

To arrange the cards, add Flexbox to their parent:

.cards {
  display: flex;
}

Parent controls children.

This sentence explains half of Flexbox.

And possibly some family psychology.

Forgetting gap

Without gap, items may touch each other.

Bad:

.cards {
  display: flex;
}

Better:

.cards {
  display: flex;
  gap: 24px;
}

Spacing matters.

Without spacing, your layout feels crowded.

Like everyone arrived at the same party and stood in the kitchen.

Using Flexbox for everything

Flexbox is great for one-dimensional layouts.

Rows or columns.

But for full two-dimensional layouts, CSS Grid is often better.

Flexbox is not bad.

It is just not the answer to every question.

Do not use a screwdriver to eat soup.

Practice

Create a page with:

Use Flexbox for:

Use these properties:

Change values and observe what happens.

CSS becomes understandable when you experiment.

Not when you stare at it like it owes you money.

Mini Challenge

Create a pricing section with three plans:

Each plan should be a card.

Use Flexbox so the cards sit in one row.

Give each card equal width with:

flex: 1;

Make the Premium card stand out.

Add a button inside each card.

Then center the button area using Flexbox.

This is real-world Flexbox.

Cards.

Buttons.

Spacing.

Alignment.

The daily bread of frontend development.

Crunchy sometimes.

But useful.

Summary

Today you learned:

Flexbox is one of the most important CSS tools.

Learn it well.

Use it often.

But do not use it for absolutely everything.

Even pizza should not be eaten with a hammer.

Next Lesson

In the next lesson, we will learn CSS Grid.

Flexbox is great for one direction.

Grid is powerful for rows and columns together.

The layout kingdom is expanding.