Flexbox exercises

In this repository you will find 4 CSS flexbox layout exercises.

Each exercise folder contains index.html and main.css file.

To complete the exercises:

1. Enable auto-save on your code editor.
2. Add the Live Server plugin for your code editor.
3. Right click on index.html file and select Open with Live Server. Now you will be able to see the changes you make to CSS file instantly in your browser.

Your goal is to edit CSS files in each task folder. Only add flexbox properties to complete the following tasks:

Task 1

These 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. The finished example should look like the image below.

Task 2

These 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. The finished example should look like the image below.

Task 3

There are two elements in the HTML file, a div with a class of .parent which contains another div with a class of .child. Use Flexbox to center the child inside the parent. The finished example should look like the image below.

Task 4

In this final task arrange these items into rows as in the image.