Flexbox Wrapping: Free Web Development Tutorial

Topics Covered in This Web Development Tutorial:

Master Flex-Wrap and Sizing Flex Items (Flex-Grow & Flex-Basis) for responsive navigation design

Exercise Preview

Exercise Overview

In this hands-on exercise, you'll master one of the most powerful aspects of Flexbox: creating responsive layouts that adapt gracefully across screen sizes. You'll learn how to make flex items wrap onto multiple lines intelligently, then size them proportionally using flex-grow and flex-basis properties. By the end, you'll have built a professional navigation component that transforms seamlessly from desktop to mobile—a critical skill for modern web development.

Getting Started

1. In your code editor, close any files you may have open to start with a clean workspace.
2. For this exercise we'll be working with the Flexbox Wrapping folder located in Desktop > Class Files > yourname-Flexbox Grid Class. If you're using a modern editor like Visual Studio Code, Sublime Text, or WebStorm, open the entire folder to take advantage of your editor's file tree navigation.
3. Open index.html from the Flexbox Wrapping folder.

4. Preview index.html in Firefox (we'll be leveraging its superior DevTools for this exercise).

   • This page builds upon previous exercises, but this time we're implementing a more sophisticated navigation pattern that responds dynamically to viewport changes.

5. Keep index.html open in Firefox as you work—you'll be refreshing frequently to see your changes take effect in real-time.

Setting Display Flex & Wrapping

Now we'll transform a basic navigation into a flexible layout system. First, we'll establish the flex container, then add intelligent wrapping behavior.

1. Switch back to your code editor.
2. Open main.css from the css folder (in the Flexbox Wrapping folder).

3. In the .navbar rule add the following bold code:

   .navbar {
      display: flex;
      border: 8px solid gray;

   Code Omitted To Save Space

   }

4. Save the file, and reload the page in Firefox.

   • Notice how the navigation items now display as a horizontal row instead of stacking vertically—this is the default flex behavior in action.
5. Ctrl–click (Mac) or Right–click (Windows) anywhere on the page and choose Inspect Element.

6. If the DevTools are not docked to the right side of the window, click the button at the top right of the DevTools panel and choose Dock to Right.

   

   This configuration allows you to resize the webpage area more precisely than you could with DevTools closed, simulating various device widths effectively.

7. Gradually resize the webpage area narrower until you observe how the navigation items stubbornly remain on one line, even when it forces horizontal scrolling—this demonstrates the default flex behavior of keeping items on a single line.
8. Keep the DevTools open for the next steps.
9. Return to your code editor.

10. In the .navbar rule add the following bold code:

    .navbar {
       display: flex;
       flex-wrap: wrap;
       border: 8px solid gray;

    Code Omitted To Save Space

    }

11. Save the file, and reload the page in Firefox.

    • Now resize the webpage area and observe how the items intelligently wrap to new lines when space becomes constrained—this is responsive design in its purest form.

Sizing the Flex Items

With wrapping established, we'll now implement sophisticated sizing controls that create a polished, professional layout across all screen sizes.

1. Return to your code editor.

2. Above the min-width: 571px media query, add the following new media query for smaller screens:

   @media (max-width: 570px) {
      .navbar .logo {
         flex-basis: 100%;
      }
   }

3. Save the file, and reload the page in Firefox.

   • The logo now claims the full width on small screens, forcing other navigation items to wrap below—a common pattern in mobile-first design.
   • Notice the remaining items don't expand to fill available space, leaving awkward white space. Let's fix this with flex-grow.
4. Return to your code editor.

5. In the max-width: 570px media query, below the .navbar .logo rule, add the following new rule:

   @media (max-width: 570px) {
      .navbar .logo {
         flex-basis: 100%;
      }
      .navbar li {
         flex-grow: 1;
      }
   }

6. Save the file, and reload the page in Firefox.

   • The navigation items now expand proportionally to fill available space. Next, we'll center the text for better visual balance.
7. Return to your code editor.

8. In the .navbar li rule add the following bold code:

   @media (max-width: 570px) {
      .navbar .logo {
         flex-basis: 100%;
      }
      .navbar li {
         flex-grow: 1;
         text-align: center;
      }
   }

9. Save the file, and reload the page in Firefox.

   • The centered text creates better visual hierarchy and balance.
   • Resize the viewport until the 4 navigation links form a 2 × 2 grid. Notice how the widths don't quite align across rows—we'll fix this with explicit sizing.
10. Return to your code editor.

11. In the max-width: 570px media query's .navbar li rule, add the following bold code:

    .navbar li {
       flex-grow: 1;
       flex-basis: 50%;
       text-align: center;
    }

12. Save the file, and reload the page in Firefox.

    • Perfect! The 2 × 2 grid now has consistent widths across both rows, creating visual harmony.
    • Close the DevTools and expand the browser window to full width.
    • On larger screens, notice all the extra space clusters on the right side. For better UX, we want the logo anchored left and navigation items grouped right.
13. Return to your code editor.

14. Before adjusting spacing, let's optimize our code using the flex shorthand property—a best practice for maintainable CSS.

    In the max-width: 570px media query's .navbar li rule, replace the two flex properties with the shorthand version as shown below in bold:

    .navbar li {
       flex: 1 0 50%;
       text-align: center;
    }

    NOTE: Remember the syntax is flex: flex-grow flex-shrink flex-basis; — this single property combines three flex behaviors into one concise declaration.

Adjusting the Layout on Larger Screens

Now we'll implement the finishing touch: creating that classic logo-left, navigation-right layout that's standard in professional web design.

1. In the min-width: 571px media query, above the footer rule add the following new rule:

   .navbar .logo {
      margin-right: auto;
   }

2. Save the file, and reload the page in Firefox.

   • Excellent! The navigation now displays the professional standard: logo anchored to the left, navigation items grouped to the right, with flex automatically handling the spacing distribution.

Optional Bonus: Refining the Layout at Another Screen Size

The 2 × 2 grid works well on very small screens, but there's an intermediate screen size where all four navigation items could fit comfortably on a single row below the logo. Let's add this refinement for a truly polished responsive experience.

1. Above the min-width: 571px media query, add the following media query and rule:

   @media (min-width: 415px) and (max-width: 570px) {
      .navbar li {
         flex-basis: 25%;
      }
   }

2. Save the file, and reload the page in Firefox.

   • Test your responsive navigation by slowly resizing the browser from narrow to wide. You should see three distinct layouts: a 2 × 2 grid on small screens, transitioning to a single row of navigation items below the logo, and finally the professional logo-left/navigation-right layout on desktop. This progressive enhancement creates an optimal user experience across all device categories.