Flexbox

Flexbox is used to change the layout of elements on the HTML page. In this exercise, you'll apply the flex-direction property to change how the countries are displayed. Follow the steps below to complete this exercise.

1. Open flexbox.css and write a CSS rule to apply display: flex to the "container" element. Hint: The "container" element will be the parent element of each country.
2. Look at the First list of countries. Then look at the solution displayed to the side. Find the differences between the two lists.
3. Use the property flex-direction to make the countries on the left look like the ones on the right.

Hint: The images below describe how flex-direction works. Try to imagine flex-direction as the direction of the arrow.

You can review how flex-direction works in this guide.