Gain insights into designing mobile-responsive web layouts using Flexbox. Delve into Box Model basics, Flexbox containers, and item alignment, and apply your knowledge to create stunning, mobile-first websites.

CBCA - CSS with Flexbox (Intermediate)-01.jpg

In this course, you will get hands-on experience in designing mobile-responsive web layouts using Flexbox. You will start with the basics like the Box Model and the process of layouting.

You will then move on to advanced concepts such as Flexbox containers, and aligning individual Flexbox items. Near the end of the course, you will put everything you just learned into practice. You will work on a project that focuses on developing a mobile-first website where you’ll experiment with page layout, headers, footers, and a lot more.

By the end of this course, you will be able to use Flexbox in your own projects to create beautiful layouts.

Designing Web Layouts with CSS and Flexbox

Let's see the solution. 

# The code

Let's recall the original code. HTML: 

```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: 

```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: 

```html
  <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: 

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

```css 
@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.

```css
@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.

```css
@media only screen and (min-width: 800px) {
  body {
    width: 700px;
  }

  .blogpost {
    width: 33.33%;
  }
}
```

Let's see the solution. 

# The code

Let's recall the original code. HTML: 

```html 
<html>
 <head>
 </head>
 <body>
    <header>Header</header>
    <main>
      <section>
        Main banner
      </section>
      <section>
        <div>First post</div>
        <div>Second post</div>
        <div>Third post</div> 
        <div>Fourth post</div>
        <div>Fifth post</div> 
        <div>Sixth post</div>
      </section>
      <section>
        Contact form
      </section>
    </main>
    <footer>Footer</footer>
 </body>
</html>
```

CSS: 

```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: 

```html
  <section>
    <div>First post</div>
    <div>Second post</div>
    <div>Third post</div> 
    <div>Fourth post</div>
    <div>Fifth post</div> 
    <div>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: 

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

```css 
@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.

```css
@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.

```css
@media only screen and (min-width: 800px) {
  body {
    width: 700px;
  }

  .blogpost {
    width: 33.33%;
  }
}
```

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

Getting Started

Using Flexbox Containers

Aligning Individual Flexbox Items

Designing a Mobile-first Website Using Flexbox

Flexbox Conclusion and Next Steps

Flexbox Layouting Solution

The code