flex 子元素左对齐,最后一个子元素右对齐的技巧

当前位置: 首页 » 记录 » css » flex 子元素左对齐,最后一个子元素右对齐的技巧

分类: css 113阅读阅读模式

如何巧用 margin的来进行 flex 布局的右对齐。

示例HTML:

  1. <nav>
  2.   <ul>
  3.     <li><a href=/about>About</a>
  4.     <li><a href=/projects>Projects</a>
  5.     <li><a href=/interact>Interact</a>
  6.     <li id="login"><a href=/login>Login</a>
  7.   </ul>
  8. </nav>

示例CSS:

  1. nav > ul {
  2.   display: flex;
  3. }
  4. nav > ul > #login {
  5.   margin-left: auto;
  6. }

 

如图所示

 

参考来源:https://www.w3.org/TR/css-flexbox-1/#auto-margins

相关文章

评论一下

暂无评论