垂直均匀 Space 个 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 我需要在垂直上均匀 spaced 以填充 div 的高度。 div .page-break 确实有 210mm 的设定高度。

每个 .page-break div 将包含不同数量的 .menu-item-div。我需要能够同样地 space 这些 div 垂直但保持在 .page-break div 的 210mm 高度内。

使用 flexbox 的解决方案很好，我对 flexbox 的了解还不足以做到这一点。
另一个要求是这些 div 将被打印，并且它必须在打印时工作。

Answer 1

在容器上设置以下属性

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

垂直均匀 Space 个 DIV

Evenly Space DIVs Vertically

html

css

flexbox

FIDDLE