## Lists as Navigation

Commonly use `nav` and `ul`, with `ul` being the flex container.

Example 4.10 - Example 4.10
<nav><ul><li><a href="#">Planet</a></li><li><a href="#">Solar System</a></li><li><a href="#">Galaxy</a></li><li><a href="#">Universe</a></li></ul></nav>nav ul { display: flex; } nav ul { list-style: none; } nav ul li { margin-left: 1em; }

- Markup
- Style
- Display

     <nav>
       <ul>
         <li>
           <a href="#">Planet       </a>
         </li>
         <li>
           <a href="#">Solar System       </a>
         </li>
         <li>
           <a href="#">Galaxy       </a>
         </li>
         <li>
           <a href="#">Universe       </a>
         </li>   </ul> </nav>

In `head` element:

    <link rel="stylesheet" href="example10.css"/>

In example10.css

    nav ul { display: flex; }
    nav ul { list-style: none;
    }
    nav ul li { margin-left: 1em; }