CODEWITHSUNDEEP
htmlcssflexbox
L84
L84

Reputation: 46298

Evenly Space DIVs Vertically

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.

Upvotes: 9

Views: 19709

Answers (1)

Danield
Danield

Reputation: 125423

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>

Upvotes: 27

Related Questions