Flex-grow and Flex-basis Solution

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 header component itself is a Flexbox with the title on the left and one form of menu on the right.
2. The .flex-container item is also a Flexbox, spacing the three menu items evenly.

Let’s add some basic styles below 768px:

header {
    display: flex;
    justify-content: space-between;
    margin: 20px;
    height: 30px;
}

.logo {
    height: 30px;
    background-color: lightgreen;
}

.main-navigation {
    height: 30px;
    background-color: lightsteelblue;
    display: none;
}


.hamburger-box {
    display: inline-block;
    width: 30px;
    min-width: 30px;
    height: 30px;
    background-color: aqua;
}

Notice that initially, the hamburger menu is displayed, but the main navigation is not. To make the width of the hamburger menu stay at 30px width, we set both the width and the min-width of the hamburger menu to 30px.

Step 2: flex-basis

It is also worth adding flex-basis values at this stage. Let’s calculate the flex-basis value to match the breakpoint widths:

• At 768px width, there are two 20px margins on the left and the right. Therefore, there is 728px space to distribute
• At a proportion of 2:1, we get 485px for the title and 243px for the inner menu.

.logo {
    height: 30px;
    flex-basis: 485px;
    background-color: lightgreen;
}

.main-navigation {
    height: 30px;
    background-color: lightsteelblue;
    display: none;
    flex-basis: 243px;
}

Step 3: Responsive breakpoint at 768px

Let’s add a breakpoint at 768px:

@media screen and (min-width: 768px) {

}

We will now hide the hamburger menu and show the main menu:

@media screen and (min-width: 768px) {
    .hamburger-box {
        display: none;
    }

    .main-navigation {
        display: block;
    }
}

Notice the logo and the main navigation are already positioned properly because of the justify-content rule that applies for all screen sizes.

Step 4: Set flex-grow

The flex-basis property of the logo was set to approximately a 2:1 ratio with respect to the flex-basis of the .main-navigation element. We will set the flex-grow properties of these elements to the same ratio respectively.

@media screen and (min-width: 768px) {
    .hamburger-box {
        display: none;
    }

    .logo {
        flex-grow: 2;
    }

    .main-navigation {
        display: block;
        flex-grow: 1;
    }
}

Step 5: Style the inner menu

Remove the unordered list and space the elements evenly.

    .flex-container {
        display: flex;
        justify-content: space-evenly;
    }

    .flex-item {
        display: inline-block;
        list-style: none;
    }

The final solution looks as follows: