What Next? - Beginning CSS3 - page 497

You can also set a margin to auto to align elements both left and right inside the same flex container. For
example, split_nav.html contains the following <nav> element:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li id="login"><a href="#">Log In</a></li>
<li>
<form method="get" action="#">
<label for="search">Search:</label>
<input type="search" name="search">
<input type="submit" name="find" value="Go">
</form>
</li>
</ul>
</nav>
The styles convert the unordered list into a single-row flex container and set the left margin of the login list
item like this:
nav>ul {
display: flex;
align-items: baseline;
margin: 0;
padding: 0;
}
#login {
margin-left: auto;
}
This splits the list items into two groups, effectively aligning them on opposite sides of the navigation menu,
as shown in Figure 22-28 .
Figure 22-28. Setting the left margin of the Log In link to auto splits the menu into two groups
Using Flex Layout Alignment Properties
Table 22-3 describes the four properties designed to help control the alignment of flex items. Three of them apply
to flex containers. The fourth applies to individual flex items.