01 / Why Do We Need Flexbox?

Think about the last website you visited. You probably saw navigation links arranged in a row, cards displayed next to each other, or an image placed beside a block of text. These are layout decisions.

Until now, you have mostly focused on the content of a webpage and the basic CSS properties that control its appearance. Flexbox introduces a more systematic way to arrange elements inside a container.

Flexbox is especially useful for navigation bars, rows of cards, profile layouts, buttons, and sections where text and images sit beside each other.

02 / Understanding the Flex Container

Flexbox starts with a parent element and its child elements. The parent becomes the flex container, and its direct children become flex items.

.container {
  display: flex;
}

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

By default, Flexbox arranges items in a row. That one CSS declaration can immediately change how your page is organized.

03 / Your First Flexbox Layout

Let’s create a simple row of three boxes. You can use this example to see how the container affects the elements inside it.

HTML

<div class="flex-container">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
</div>

CSS

.flex-container {
  display: flex;
  gap: 16px;
  padding: 20px;
  background-color: #edf2ff;
}

.box {
  background-color: #2457d6;
  color: white;
  padding: 24px;
  text-align: center;
}

Notice that display: flex; belongs to the container, while the background color and padding belong to the boxes themselves.

04 / The Main Flexbox Properties

You do not need to learn every Flexbox property at once. Start with these five. They cover many of the layout situations you will encounter in an introductory web design project.

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

.container {
  display: flex;
  justify-content: space-between;
}

.container {
  display: flex;
  align-items: center;
}

.container {
  display: flex;
  gap: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

05 / Understand the Axes

Two Flexbox properties become much easier to understand when you think about the direction of the layout.

06 / Build a Navigation Bar

Navigation is one of the easiest ways to see Flexbox in action. Let’s arrange a site name on one side and navigation links on the other.

<header class="site-header">
  <a class="site-name" href="#home">
    STUDIO NORTH
  </a>

  <nav class="site-nav">
    <a href="#work">Work</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background-color: #111b35;
}

.site-name {
  color: #d7ff64;
  font-weight: bold;
  text-decoration: none;
}

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

.site-nav a {
  color: white;
  text-decoration: none;
}

The outer header uses Flexbox to separate the site name from the navigation. The navigation uses its own Flexbox container to arrange the links. This is an example of using Flexbox at more than one level.

07 / Create a Row of Design Cards

Flexbox is also useful for displaying related content. Imagine a portfolio with three project cards. The cards can sit next to each other when space allows and wrap onto another line when necessary.

<section class="project-list">
  <article class="project-card">
    <h2>Poster Design</h2>
    <p>A visual identity experiment.</p>
  </article>

  <article class="project-card">
    <h2>Photo Series</h2>
    <p>An exploration of light.</p>
  </article>

  <article class="project-card">
    <h2>Editorial Layout</h2>
    <p>A study in type and space.</p>
  </article>
</section>

.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.project-card {
  flex: 1 1 220px;
  padding: 24px;
  background-color: #f3f5fa;
  border: 1px solid #dfe4ee;
  border-radius: 12px;
}

The declaration flex: 1 1 220px; allows a card to grow when there is room, shrink when needed, and start with a preferred basis of about 220 pixels. With wrapping enabled, cards can move to additional rows when the available width is too small.

08 / Flexbox and Responsive Layouts

Flexbox can help a layout adapt to different screen widths. You can allow items to wrap or change the direction of the layout at a particular viewport width.

.feature {
  display: flex;
  align-items: center;
  gap: 24px;
}

.feature img {
  width: 45%;
  height: auto;
}

@media (max-width: 600px) {
  .feature {
    flex-direction: column;
    align-items: stretch;
  }

  .feature img {
    width: 100%;
  }
}

On wider screens, the image and text can sit side by side. Below 600 pixels, the media query stacks them vertically and allows the image to fill the available width.

09 / In-Class Assignment: Creative Studio Layout

Design a simple homepage for a fictional creative studio, artist collective, or small design agency. The goal is to practice Flexbox through a layout that could realistically appear on a portfolio website.

Your page must include:

• A header with a studio name and navigation links arranged using Flexbox.
• A feature area with an image and a block of introductory text.
• A row of three project cards using Flexbox.
• Consistent gaps between layout items.
• A footer with a short closing message or contact link.
• A media query that adjusts at least one layout for a narrow screen.

Keep the visual design simple. Use placeholder colors, basic borders, and a small amount of text. Your focus should be on how the elements are arranged rather than on creating a finished brand identity.

Starter HTML

<header class="site-header">
  <a class="site-name" href="#home">Studio North</a>
  <nav>
    <a href="#work">Work</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main id="home">
  <section class="feature">
    <img src="https://placehold.co/600x400"
         alt="Placeholder image for the featured studio project">
    <div>
      <h1>Ideas into Images</h1>
      <p>A short introduction to your studio.</p>
    </div>
  </section>

  <section id="work" class="project-list">
    <article class="project-card">
      <h2>Project One</h2>
      <p>Describe the project.</p>
    </article>
    <article class="project-card">
      <h2>Project Two</h2>
      <p>Describe the project.</p>
    </article>
    <article class="project-card">
      <h2>Project Three</h2>
      <p>Describe the project.</p>
    </article>
  </section>

  <section id="about">
    <h2>About the Studio</h2>
    <p>Add a short studio description.</p>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Add contact information.</p>
  </section>
</main>

<footer>
  <p>© 2026 Studio North</p>
</footer>

Starter CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #202638;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background-color: #111b35;
}

.site-name {
  color: #d7ff64;
  font-weight: bold;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  gap: 16px;
}

.site-header nav a {
  color: white;
  text-decoration: none;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
}

.feature img {
  width: 45%;
  height: auto;
}

.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.project-card {
  flex: 1 1 220px;
  padding: 20px;
  background-color: #f3f5fa;
  border: 1px solid #dfe4ee;
}

main section {
  margin-bottom: 32px;
}

footer {
  padding: 24px;
  background-color: #f3f5fa;
}

@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header nav {
    flex-wrap: wrap;
  }

  .feature {
    flex-direction: column;
    align-items: stretch;
  }

  .feature img {
    width: 100%;
  }
}

10 / Independent Practice

After completing the in-class studio layout, create a second Flexbox layout based on a subject that interests you. This could be a music page, a photography portfolio, a collection of illustrations, a fashion page, or a small creative brand.

1. Choose your content.
   Decide what the page will communicate and identify three or four items that could be displayed together.
2. Build your HTML.
   Use semantic elements to organize the content before you begin styling the layout.
3. Activate Flexbox.
   Apply display: flex; to a parent container and observe how its direct children are arranged.
4. Experiment with alignment.
   Try different values for justify-content, align-items, and gap.
5. Test the layout.
   Resize the browser and decide whether the items should wrap, change direction, or adjust their widths.

11 / What to Submit

Submit the following through the designated D2L assignment area:

• A link to your completed CodePen project.
• A screenshot of your creative studio layout.
• A short reflection of approximately 100–150 words.

Reflection questions

• Which elements did you place inside a flex container?
• How did you use justify-content and align-items?
• What changed when you added flex-wrap?
• What did you change to make your layout work on a narrow screen?

12 / Final Checklist

• I understand the difference between a flex container and flex items.
• I used display: flex; on the correct parent elements.
• I experimented with flex-direction.
• I used justify-content and/or align-items.
• I used gap to control spacing.
• I tried flex-wrap or a flexible item basis.
• I tested the layout at a narrower browser width.
• I submitted the project link, screenshot, and reflection.