gpt4 book ai didi

CSS flex 盒 : Align last nth items towards the end

转载 作者:行者123 更新时间:2023-12-05 02:50:38 27 4
gpt4 key购买 nike

<分区>

我在“nav”中有几个“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 正好 float 在中间:

nav {
display: flex;
flex-direction: column;
align-items: flex-start;

& > div:nth-child(5),
& > div:nth-child(6) {
margin-top: auto;
}
}

enter image description here

如何使 div E 与底部的 div F 保持一致(无需在导航中额外包裹 div)?

enter image description here

JSFiddle

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com