Kevin Powell - Community•2y ago

Why isn't my last child of nav-link being pushed to the bottom? Would also love some critiques!

https://jsfiddle.net/2rsnbkyo/1/

Responsive sidebar with App bar Flexbox - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

3 Replies

Unknown User•2y ago

Message Not Public

soraOP•2y ago

Thank you!

MarkBoots•2y ago

.sidebar{ display: flex; flex-direction: column }
nav { flex: 1 }
.nav-list { display: flex; flex-direction: column; height: 100% } 
.nav-link:last-child { margin-top: auto }

.sidebar{ display: flex; flex-direction: column }
nav { flex: 1 }
.nav-list { display: flex; flex-direction: column; height: 100% } 
.nav-link:last-child { margin-top: auto }

you could also take a look at css grid to make your main layout

Gaming

Programming

Why isn't my last child of nav-link being pushed to the bottom? Would also love some critiques!