Evenly Space DIVs Vertically

Question

I have HTML that looks like the following:

<div class="page-break">  
   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>

   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>

   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>
</div>

Each .menu-item-div I need to be evenly spaced apart vertically to fill the div's height. The div .page-break does have a set height of 210mm.

Each .page-break div will have a different number of .menu-item-div within it. I need to be able to equally space these divs vertically but stay contained within the .page-break div's height of 210mm.

A solution using flexbox is fine, I just don't know flexbox enough to do this.
Another requirement is these divs will be printed and it has to work when printed.

http://stackoverflow.com/a/33856609/3597276 – Michael Benjamin Nov 30 '15 at 02:13 — Michael Benjamin, Nov 30 '15 at 02:13
@Michael_B - Good information. Thank you for the link. – L84 Nov 30 '15 at 03:46 — L84, Nov 30 '15 at 03:46

Danield · Accepted Answer · 2015-11-29T23:06:26.493

Set the following properties on the container

.page-break {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

FIDDLE

.page-break {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  border: 1px solid green;
}
.menu-item-div {
  background: tomato;
  height: 40px;
  /* If there was real content in the markup this would not be necessary */
}

<div class="page-break">
  <div class="menu-item-div">
    <!-- CONTENT WITHIN DIV -->
  </div>

  <div class="menu-item-div">
    <!-- CONTENT WITHIN DIV -->
  </div>

  <div class="menu-item-div">
    <!-- CONTENT WITHIN DIV -->
  </div>
</div>

How can I control the justify-content spacing? – martinkaburu Jan 12 '21 at 12:10 — martinkaburu, Jan 12 '21 at 12:10

Evenly Space DIVs Vertically

1 Answers1

FIDDLE

Linked

Related