Test your skills: Flexbox
The aim of this skill test is to assess whether you understand how flexbox and flex items behave. Below are four common design patterns that you might use flexbox to create. Your task is to build them.
Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
If you get stuck, you can reach out to us in one of our communication channels.
Task 1
In this task, the list items are the navigation for a site. They should be laid out as a row, with an equal amount of space between each item.
Your final result should look like the image below:
Try updating the live code below to recreate the finished example:
Download the starting point for this task to work in your own editor or in an online editor.
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:
Try updating the live code below to recreate the finished example:
Additional question:
- Can you now make the first item twice the size of the other items?
Download the starting point for this task to work in your own editor or in an online editor.
Task 3
In this task, there are two elements in the HTML below, a <div> element with a class of parent which contains another <div> element with a class of child. Use flexbox to center the child inside the parent. Note that there is not just one possible solution here.
Your final result should look like the image below:
Try updating the live code below to recreate the finished example:
Download the starting point for this task to work in your own editor or in an online editor.
Task 4
In this task, we want you to arrange these items into rows as in the image below:
Try updating the live code below to recreate the finished example:
Download the starting point for this task to work in your own editor or in an online editor.