Designing Web Layouts with CSS and Flexbox/

...

/

Flex-direction Solution

Flex-direction Solution

This lesson is the solution to the Flex-direction exercise in the previous lesson.

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 ...