如何巧用 margin
的来进行 flex
布局的右对齐。
示例HTML:
- <nav>
- <ul>
- <li><a href=/about>About</a>
- <li><a href=/projects>Projects</a>
- <li><a href=/interact>Interact</a>
- <li id="login"><a href=/login>Login</a>
- </ul>
- </nav>
示例CSS:
- nav > ul {
- display: flex;
- }
- nav > ul > #login {
- margin-left: auto;
- }
如图所示
参考来源:https://www.w3.org/TR/css-flexbox-1/#auto-margins