Flex Shorthand Notation Solution

Step 1: Removing the hamburger menu

First, let’s remove the hamburger menu from the markup, and the corresponding styles in the CSS. This includes removing the styles responsible for hiding the default grey menu.

Remove this line from the HTML code:

<div class="hamburger-box"></div>

Also remove the following CSS rules:

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

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

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

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

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


@media screen and (min-width: 768px) {
    .flex-container {
        display: flex;
        justify-content: space-evenly;
    }

/*
    .hamburger-box {
        display: none;
    }
*/

    .logo {
        flex-grow: 2;
    }

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

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

The grey menu is still not correct on small screen sizes.

Step 2: Removing the breakpoint

There is no need for a breakpoint anymore, because we will have the same menu on all screen sizes. Therefore, we can unify the styles below 768px and above 768px screen widths.

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

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

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

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

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

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

Step 3: Shrinking the logo three times as fast as the menu

We can add proportional shrinking to the .logo and the .main-navigation elements. The title should shrink three times as fast as the main navigation, therefore its flex-shrink value should be 3.

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

.main-navigation {
    height: 30px;
    background-color: lightsteelblue;
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 243px; 
}

Let’s rewrite these two styles using the recently learned flex property:

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

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

Step 4: Apply a min-width to the container

Let’s test the solution with 320px. This width should be small enough for the content to fit on the screen.

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

The final solution looks as follows: