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.
Task 1
In this task, the list items are 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.
Your final result should look like the image below:
<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: 700px;
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 */
}
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;
}
Task 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 what content is in each item.
Your final result should look like the image below:
Bonus question: Can you now make the first item twice the size of the other items?
<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: 700px;
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 */
}
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;
}
Task 3
In this task, we'd like you to arrange the list items into rows as shown in the image below:
<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 */
}
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;
}