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

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