垂直均匀空间DIVs

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的设定高度为210毫米。

每个.page-break div都有不同数量的.menu-item-div。我需要能够相等的空间，这些div垂直，但保持在.page-break div的高度210毫米。

一个使用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>

​