Designing Web Layouts with CSS and Flexbox/

...

/

Flex-grow and Flex-basis Solution

Flex-grow and Flex-basis Solution

This lesson contains the solution to the flex-grow and flex-basis exercise in lesson.

We'll cover the following...

Step 1: Class annotations and basic Flexbox styling below 768px

Let’s add a couple of classes to refer to the individual elements:

   <header>
     <h2 class="logo">Title</h2>
     <div class="hamburger-box"></div>
     <nav class="main-navigation">
       <ul class="flex-container">
         <li class="flex-item">Home</li>
         <li class="flex-item">About</li>
         <li class="flex-item">Contact</li>
       </ul>
     </nav>
   </header>

To eliminate non-uniform behavior, let’s add a basic reset:

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

We have learned about better resets than this one, but for the sake of the exercise, this simple reset will do the job.

We will use two Flexboxes:

  1. The ...