How can I position the last element at the end of the column using flexbox?

Question

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>

score 9 · Accepted Answer · answered Jul 07 '17 at 19:48

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>

How can I position the last element at the end of the column using flexbox?

1 Answers1