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

2020-07-06 2288 css

如何巧用 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

原创文章，如若转载，请注明出处：http://loc.darlang.com/post/1208.html

css display flex wp

评论 (0)

分类目录

推荐文章