Olanrewaju Lax Lawal Olanrewaju Lax Lawal - 20 days ago 7
CSS Question

Vertically align divs with equal space between them

So I'm struggling to achieve this simple concept with CSS and i've also searched the entire internet but couldn't find anything. I think I'm just not wording it correctly so a visual image of what i'm trying to do is this:

enter image description here

The top box should be positioned on top and the bottom one should be positioned at the bottom. Then the boxes in between them should have equal spacing on top and bottom. This is more like the vertical version of this answer: http://stackoverflow.com/a/6880421/7150896

Answer

You can use Flexbox for this. You just need to set flex-direction: column and justify-content: space-between.

body,
html {
  margin: 0;
  padding: 0;
}
.content {
  display: flex;
  height: 250px;
  border: 1px solid black;
  justify-content: space-between;
  flex-direction: column;
  width: 200px;
}
.box {
  background: #0479D9;
  height: 50px;
}
<div class="content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Comments