Sticky footer with flexbox

Question

I found out a very simple way of creating a sticky footer for my website, and at first sight it seems to work perfectly.

But since I don\'t see other people using the

Answer 1

Yes, this is a normal set-up. That's what justify-content: space-between is supposed to do: Pin the first and last elements to the edges of the container.

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

article { background-color: lightgreen; }
footer  { background-color: orangered;  }
body    { margin: 0; }

<main>
  <article>inner div</article>
  <footer>footer</footer>
</main>

Also, if you want the main content to fill the empty space, while pinning the footer to the bottom, you don't even need justify-content. Use flex-grow.

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

article {
  flex-grow: 1;
  background-color: lightgreen;
}

footer  { background-color: orangered;  }
body    { margin: 0; }

<main>
  <article>inner div</article>
  <footer>footer</footer>
</main>

Lastly, when you have multiple elements in a flex container, justify-content may not provide enough options for alignment. You have a lot more flexibility with auto margins.