Flex-grow and Flex-basis Solution
This lesson contains the solution to the flex-grow and flex-basis exercise in lesson.
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:
- The
header
component itself is a Flexbox with the title on the left and one form of menu on the right. - 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 two20px
margins on the left and the right. Therefore, there is728px
space to distribute - At a proportion of 2:1, we get
485px
for the title and243px
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:
Get hands-on with 1200+ tech skills courses.