Menu
I'm trying to use flexbox to position the last item at the bottom of the vertical navbar. Is there a way to do this using flexbox?
Here is the code example:
<!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>
963
margin-top: auto will push it to the bottom. You can read more about auto margin's and flexbox here - https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
<!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;
margin-top: auto;
}
</style>
<body>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
