Flexbox Layouting Solution

This lesson is the solution to the Flexbox layouting exercise in the previous lesson.

We'll cover the following

Let’s see the solution.

The code

Let’s recall the original code. HTML:

<html>
 <head>
 </head>
 <body>
    <header>Header</header>
    <main>
      <section class="main-banner">
        Main banner
      </section>
      <section class="blogposts">
        <div class="blogpost">First post</div>
        <div class="blogpost">Second post</div>
        <div class="blogpost">Third post</div> 
        <div class="blogpost">Fourth post</div>
        <div class="blogpost">Fifth post</div> 
        <div class="blogpost">Sixth post</div>
      </section>
      <section class="contact-form">
        Contact form
      </section>
    </main>
    <footer>Footer</footer>
 </body>
</html>

CSS:

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

header, footer {
  background-color: lightgreen;
  min-height: 100px;
  border: 1px solid black;
}

.main-banner {
  background-color: lightsalmon;
  min-height: 400px;
  border: 1px solid black;
}

.blogposts {
  background-color: lightblue;
}

.blogpost {
  min-height: 150px;
  border: 1px solid black;
}

.contact-form {
  background-color: lightyellow;
  min-height: 500px;
  border: 1px solid black;
}

While the solution was revealed in the last lesson, chances are, you need more guidance to understand details that will come in handy later.

Hiding the last three blog posts

Multiple solutions are acceptable. You can create selectors that only select the first three. Alternatively, a cleaner solution helps you select the corresponding elements via classes.

The reference solution is inspired by Bootstrap’s classes:

  <section class="blogposts">
    <div class="blogpost">First post</div>
    <div class="blogpost">Second post</div>
    <div class="blogpost">Third post</div> 
    <div class="blogpost d-none d-sm-block">Fourth post</div>
    <div class="blogpost d-none d-sm-block">Fifth post</div> 
    <div class="blogpost d-none d-sm-block">Sixth post</div>
  </section>

The class d-none adds display: none; to its element, hiding it.

The class d-sm-block ads display: block to its element on screen sizes small and above. In our case, the small screen size is defined as 600px and above.

The advantage of this approach is that the defined classes are reusable, and they are semantically obvious to understand.

Let’s create the styles:

.d-none {
  display: none;
}

@media only screen and (min-width: 600px) {
    .d-sm-block {
      display: block;
    }
}

Our first media query will come in handy later.

Adding the left and right margins

Up until the 600px breakpoint, the layout is so far fluid. This means the width of the viewport equals the width of the elements.

From 600px onwards, the width of the elements is 600px, and the width of the rest of the horizontal space is used for left and right margins.

Centering block elements comes with an auto left and right margin.

@media only screen and (min-width: 600px) {
    body {
      width: 600px;
      margin: 0 auto;
    }

    .d-sm-block {
      display: block;
    }
}

Blogpost layout above 600px

While inline-block or grid solutions are also accepted, flexbox is easier to use than inline-block, and the grid system is not in this course. Therefore, we will use Flexbox in the same way how it was introduced in the Solution with Flexbox lesson.

@media only screen and (min-width: 600px) {
    body {
      width: 600px;
      margin: 0 auto;
    }

    .d-sm-block {
      display: block;
    }

    .blogposts {
      display: flex;
      flex-wrap: wrap;
    }

    .blogpost {
      width: 50%;
    }
}

The 800px breakpoint

There is nothing new in the 800px breakpoint except striving for simplicity.

Only use rules that are incremental:

  • There is no need to repeat the margin settings in the body, they apply at and above 600px, including 800px and above.
  • The .blogposts rule doesn’t change with respect to the 600px breakpoint.
@media only screen and (min-width: 800px) {
  body {
    width: 700px;
  }

  .blogpost {
    width: 33.33%;
  }
}

Get hands-on with 1400+ tech skills courses.