gpt4 book ai didi

css - 如何使用 flexbox 将最后一个元素定位在列的末尾?

转载 作者:行者123 更新时间:2023-11-28 09:07:21 27 4
gpt4 key购买 nike

<分区>

我正在尝试使用 flexbox 将最后一个元素定位在垂直导航栏的底部。有没有办法使用 flexbox 来做到这一点?

navbar

这是代码示例:

<!doctype html>
<html>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
background: red;
width: 100px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
}

li {
border: 1px solid blue;
}

li:last-child {
background: blue;
align-self: end;
}

</style>
<body>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
</body>
</html>

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