Assignment017C

Flexbox for Menus

In this assignment, we will apply what we learned about flexbox. Thus far we have used flexbox to place divs next to each other to create layouts. However, you will often see flexbox used to place components next to each other, for example links and buttons.

In this assignment we will take an unordered list (ul) and place the children list items (li) next to each other to create a horizontal menu.

In this instance, the unordered list is the parent element and the list items are the children elements. To get the list items next to each other simply add display:flex to the unordered list style. To get the list items to separate evenly, add justifiy-content:space-around; to the unordered list style. Your finished menu should look like this image. Finished Menu.

Fix the unordered list below to make it flow horizontally.