如何解决CSS Flexbox:将最后n个项目对齐到末尾
我在“导航”中有一些“ div”:
<nav>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</nav>
我想在顶部对齐div A,B,C,D,但在底部对齐div E和F:
此代码适用于最后一项(F),但E恰好浮动在中间:
nav {
display: flex;
flex-direction: column;
align-items: flex-start;
& > div:nth-child(5),& > div:nth-child(6) {
margin-top: auto;
}
}
我该如何使div E底部粘有div F(在导航栏内没有多余的包裹div)?
解决方法
您可以通过以下两种方式进行操作。
使用nth-child()
仅在margin-top:auto
上使用nth-child(5)
以获得所需的结果
实时演示:
nav {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 250px;
width: 150px;
border: 1px solid red;
}
div {
display: flex;
justify-content: center;
border: 1px solid blue;
width: 100%;
}
div:nth-child(5) {
margin-top: auto;
}
<nav>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</nav>
使用:nth-last-child()
您也可以使用nth-last-child()来实现。
nav {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 250px;
width: 150px;
border: 1px solid red;
}
div {
display: flex;
justify-content: center;
border: 1px solid blue;
width: 100%;
}
div:nth-last-child(2) {
margin-top: auto;
}
<nav>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</nav>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。