Webbo3 Frontend Development · Month 1 · Lesson 12

Flexbox Complete: Practical Layout Mastery

Learn CSS flexbox justify content and align items to build one dimensional layouts like nav bars and card rows with precision, using live interactive examples.

You have probably tried to build a simple navigation bar or a row of cards, but the elements never quite line up as expected. You have added margins, paddings, and even used absolute positioning, but it still does not look right. This is a common problem for beginners, and it is not because you are not trying hard enough, but because you are missing a fundamental concept in CSS layout: Flexbox. By the end of this lesson, you will be able to build any one dimensional layout, whether it is a navigation bar, a card row, or a centred hero section, without relying on guesswork or trial and error.

The key to mastering Flexbox is understanding how it works and when to use it. You will learn how to create a container that can hold multiple elements, and how to control the layout of those elements using Flexbox properties. We are moving past the theory and diving straight into practical application. Type along with every example, because the best way to learn layout is by doing it.

What you need before starting

Your code editor and the project folder from previous lessons. Work along in your own editor as you read. This lesson is written to be typed, not skimmed.

Interactive Flexbox Playground

Let us make this interactive. Click the buttons below to see how different Flexbox properties change the layout in real time. Watch how the boxes move when you change the justify, align, or direction properties. This is the fastest way to build an intuition for the main axis and cross axis.

/* CSS for the interactive playground */
.playground {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 250px;
  background: #e0f2f1;
}

/* JavaScript to change properties on click */
function setJustify(value) {
  playground.style.justifyContent = value;
}

Display Flex and The Gap Property

Display flex is a CSS property that allows you to easily create flexible layouts. When you apply display flex to a container element, it becomes a flexible container and its child elements become flexible items. The gap property is used to add space between flex items, making your layout clean and consistent without needing messy margins on individual items.

/* Container becomes a flex container */
.container {
  display: flex;
  flex-direction: row;
  gap: 15px; /* Adds clean space between items */
  background: #f0f0f0;
  padding: 20px;
}

/* Child items automatically align horizontally */
.item {
  width: 80px;
  height: 80px;
  background: #0a6e6e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

Flex Wrap for Responsive Grids

Flex wrap is a CSS property that allows you to control whether flexible items should wrap to a new line or not. When you apply flex wrap wrap to a flexible container, its child elements will wrap to a new line if there is not enough space on the current line. A common use case for flex wrap is building a responsive card grid that adjusts to smaller screens without needing complex media queries.

.card-grid {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  gap: 20px;
}

.card {
  flex: 1 1 250px; /* Grow, shrink, and minimum basis width */
  background: #e0f2f1;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

Full Practical Exercise

Now it is your turn. Build a complete responsive layout featuring a horizontal navigation bar and a row of three cards that wrap on smaller screens. Here is the full code. Study it, type it, and run it.

/* Complete CSS for the exercise */
body { 
  font-family: sans-serif; 
  margin: 0; 
  padding: 0; 
  background: #f4f4f4;
}

/* Navbar styling using flexbox */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: #0a2540;
  color: #fff;
}

/* Nav links container */
.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
}

/* Card grid container */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px;
  justify-content: center;
}

/* Individual card styling */
.card {
  flex: 1 1 300px; /* grow, shrink, basis */
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* HTML Structure */
<nav class="navbar">
  <div class="logo">Webbo3</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<main class="container">
  <div class="card">Card One</div>
  <div class="card">Card Two</div>
  <div class="card">Card Three</div>
</main>

Common mistakes to avoid

• Forgetting to set display flex on the parent element. This happens because students overlook the requirement for a flex container. The fix is to add display flex to the CSS for the parent element.
• Confusing justify content and align items. This occurs due to the similar names and purposes of these properties. The fix is to remember that justify content controls the main axis and align items controls the cross axis.
• Using float properties with Flexbox. This happens because students are used to working with floats in older layouts. The fix is to remove any float properties and rely solely on Flexbox properties for layout.
• Not using the flex shorthand property. This occurs because students are unsure about the benefits of the shorthand. The fix is to use the flex shorthand to set flex grow, flex shrink, and flex basis in a single line of code.

Questions students ask

• What is the difference between row and column directions? Row arranges items horizontally, while column arranges them vertically.
• How do I make a flex item take up the full width? Use flex basis 100 percent or the flex shorthand property to set the basis to 100 percent.
• Can I use Flexbox with other layout methods like Grid? Yes, you can use Flexbox and Grid together to create complex layouts, but be cautious of overlapping properties and behaviors.

Next lesson: CSS Grid Complete.