垂直均匀分布 DIV答案

【问题标题】：Evenly Space DIVs Vertically垂直均匀分布 DIV
【发布时间】：2015-11-29 21:17:40
【问题描述】：

我的 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-break div 中都有不同数量的.menu-item-div。我需要能够在垂直方向等分这些 div，但要保持在 .page-break div 的 210mm 高度内。

使用 flexbox 的解决方案很好，我只是不太了解 flexbox 来做到这一点。
另一个要求是这些 div 将被打印出来，并且在打印时必须能够工作。

【问题讨论】：

stackoverflow.com/a/33856609/3597276
@Michael_B - 很好的信息。谢谢你的链接。

标签： html css flexbox

【解决方案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>

【讨论】：

如何控制对齐内容间距？