Test your skills: Flexbox
The aim of this skill test is to help you assess whether you understand how flexbox and flex items behave. Below are four sets of design problems you can solve using flexbox. Your task is to fix the problems.
Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.
Interactive challenge
First of all, we are giving you a fun, interactive flexbox challenge created by our learning partner, Scrimba.
Watch the embedded scrim, and complete all the tasks on the timeline (the little ghost icons) by following the instructions and editing the code. When you are done, you can resume watching the scrim to check how the teacher's solution matches up with yours.
Flexbox 1
In this task, we use some list items to create the navigation for a site. To complete the task, use flexbox to lay out the list items as a row, with an equal amount of space between each item.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/products">Our Products</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
body {
font: 1.2em / 1.5 sans-serif;
}
nav ul {
max-width: 750px;
list-style: none;
padding: 0;
margin: 0;
}
nav a:link,
nav a:visited {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
display: inline-block;
text-decoration: none;
}
nav ul {
/* Add styles here */
}
When the task is complete, the items should look like this:
Click here to show the solution
You can apply display: flex and control spacing using the justify-content property:
nav ul {
display: flex;
justify-content: space-between;
}
Flexbox 2
In this task, the list items are all different sizes, but we want them to be displayed as three equal-sized columns, no matter the content in each item.
Bonus question: Can you now make the first item twice the size of the other items?
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<ul>
<li>I am small</li>
<li>I have more content than the very small item.</li>
<li>
I have lots of content. So much content that I don't know where it is all
going to go. I'm glad that CSS is pretty good at dealing with situations
where we end up with more words than expected!
</li>
</ul>
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
max-width: 750px;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
ul {
/* Add styles here */
}
li {
/* Add styles here */
}
When the task is complete, the items should look like this:
Click here to show the solution
It's best to use shorthands, so in this scenario flex: 1 is probably the best answer, and so the most optimal result would be:
ul {
display: flex;
}
li {
flex: 1;
}
For the bonus question, add a selector that targets the first element and sets flex: 2; (or flex: 2 0 0; or flex-grow: 2):
li:first-child {
flex: 2;
}
Flexbox 3
In this task, we'd like you to arrange the list items into rows.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<ul>
<li>Turnip</li>
<li>greens</li>
<li>yarrow</li>
<li>ricebean</li>
<li>rutabaga</li>
<li>endive</li>
<li>cauliflower</li>
<li>sea lettuce</li>
<li>kohlrabi</li>
<li>amaranth</li>
</ul>
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
width: 450px;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
margin: 0.5em;
}
ul {
/* Add styles here */
}
li {
/* Add styles here */
}
When the task is complete, the items should look like this:
Click here to show the solution
This task requires an understanding of the flex-wrap property to wrap flex lines. In addition, to ensure that you end up with something that looks like the example, you need to set flex: auto on the child (or flex: 1 1 auto;).
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: auto;
}