Search⌘ K
Home
Courses
Designing Web Layouts with CSS and Flexbox

Flex-direction Solution

Explore how to implement flex-direction in responsive layouts by following a complete Flexbox exercise. Learn to use media queries, box-sizing, and flex containers to build mobile-first designs that adapt smoothly from narrow to wider screens.

We'll cover the following...

The following steps provide a complete solution to the flex-direction exercise:

Step 1: Markup

We could create two divs with three children each for the columns, or three divs with two children each for the rows.

As the order of the boxes should stay natural, and we cannot reposition the inner divs, we will create three rows with two children each:

<div class="flex-container">
  <div class="flex-item">First</div>
  <div class="flex-item">Second</div>
</div>
<div class="flex-container">
  <div class="flex-item">Third</div>
  <div class="flex-item">Fourth</div>
</div>
<div class="flex-container">
  <div class="flex-item">Fifth</div>
  <div class="flex-item">Sixth</div>
</div>

Step 2: Basic CSS setup with media query

We will address the following points:

  • The minimum width of the page should be 400 pixels

  • Colors: the page background should be lightblue ...