Flex-direction Solution

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

body {
  min-width: 400px;
  background-color: lightblue;
}

• Below the 600 pixels screen width, each box is 400 pixel wide and is centered horizontally
• The top and bottom margin around the boxes is 40px
• The height of each box is 200px
• At or above the 600px width, each box is 250px wide and there is a 25px margin around the boxes
• The boxes have an orange background

Note that we will make use of the mobile-first setup we learned in the first chapter of the course. After defining generic styles, we will only have to take care of incremental style definitions at or above 600px.

Note the exercise does not specify the height explicitly at or above 600px screen width. In this case, we will inherit the generic height of 200px, as the below 600px height is inherited at or above 600px.

The 25px margin overrides all margins (top, right, bottom, left) at or above 600px.

body {
  min-width: 400px;
  background-color: lightblue;
}

.flex-item {
  width: 400px;
  height: 200px;
  margin: 40px auto;
  background-color: orange;
}

@media only screen and (min-width: 600px) {
  .flex-item {
    width: 250px;
    margin: 25px;
  }
}

Step 3: border-box

• Despite adding a 1px black border, two boxes should fit next to each other even at 600px page width
• The boxes are aligned to the left

The left alignment automatically applies.

The tool that helps us fit 600px of content and 2px of border in 600px is the border-box box-sizing model. This model includes the border width in the box width, therefore, instead of 602px, we only have 600px content to deal with in each row.

A generic best practice is to add a CSS reset to set the margin, padding, and box-sizing model of all elements in the code. We will perform this reset at the top of the stylesheet.

Although it is up to interpretation whether the 1px black border is to be added to screen sizes below 600px, common sense dictates that we use uniform style for all screen sizes.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-width: 400px;
  background-color: lightblue;
}

.flex-item {
  width: 400px;
  height: 200px;
  margin: 40px auto;
  background-color: orange;
  border: 1px solid black;
}

@media only screen and (min-width: 600px) {
  .flex-item {
    width: 250px;
    margin: 25px;
  }
}

Step 4: Flexbox

There is no need to change anything else below 600px screen width, because the block layout already displays the rectangles perfectly.

At or above 600px, we will need to add display: flex;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-width: 400px;
  background-color: lightblue;
}

.flex-item {
  width: 400px;
  height: 200px;
  margin: 40px auto;
  background-color: orange;
  border: 1px solid black;
}

@media only screen and (min-width: 600px) {
  .flex-container {
    display: flex;
  }

  .flex-item {
    width: 250px;
    margin: 25px;
  }
}

Step 5: 900px layout

Let’s define the 900px media query. Everything else stays intact.

In this small example, we will use the body as an outer Flex container. Normally, we would need an external component as a flex container. In real-world projects, create another container.

@media only screen and (min-width: 900px) {
  body {
    display: flex;
  }

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

The above stylesheet defines the

First  Third  Fifth 
Second Fourth Sixth

layout. For the reversed layout, consider adding flex-direction: row-reverse to the body:

@media only screen and (min-width: 900px) {
  body {
    display: flex;
    flex-direction: row-reverse;
  }

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

The complete solution

Let’s summarize all the steps in a complete solution.