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:
- Enable auto-save on your code editor.
- Add the
Live Server
plugin for your code editor. - Right click on
index.html
file and selectOpen 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:
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.
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.
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.
In this final task arrange these items into rows as in the image.