垂直空间DIV垂直

Question

我有HTML,如下所示:

<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>

每个.menu-item-div我需要垂直均匀分开以填充div的高度.div .page-break的设定高度为210mm.

每个.page-breakdiv都有不同的数量.menu-item-div.我需要能够在垂直方向上均匀地放置这些div,但是要保持在.page-breakdiv的210mm高度内.

使用flexbox的解决方案很好,我只是不知道flexbox足以做到这一点.
另一个要求是这些div将被打印,并且必须在打印时工作.

Answer 1

在容器上设置以下属性

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

小提琴

.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>