Vertically align divs with equal space between them

Question

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:

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: https://stackoverflow.com/a/6880421/7150896

@paolo.basso99 can't use margins because I need the spacing to be calculated dynamically and it should work seamlessly when more boxes are added — Olanrewaju Lax Lawal, Nov 12 '16 at 22:10

score 15 · Accepted Answer · answered Nov 12 '16 at 20:08

15

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>

answered Nov 12 '16 at 20:08

Nenad Vracar

118,580
15
151
176

Awesome. I have come across flex box but was too lazy to read and understand how it works. – Olanrewaju Lax Lawal Nov 12 '16 at 20:15

score 1 · Answer 2 · answered Apr 15 '21 at 10:39

You can also achieve this using grid css layout:

.content {
  display: grid;
  align-content: space-between;
  height: 275px;
  border: 1px solid black;
  width: 200px;
}
.box {
  background: #0479D9;
  height: 75px;
}

<div class="content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Vertically align divs with equal space between them

2 Answers2