html - 使用 flexbox，垂直居中元素并尊重 flexbox 容器的顶部 150px 空间

Question

我正在尝试在 CSS 中制作一个具有以下特征的 flexbox:

• 三个元素在 flexbox 中间堆叠并居中
• 一个元素锁定在 flexbox 的底部
• Flexbox 设置为 100vh 和 100vw 大小，占用可见屏幕区域
• flexbox 中的元素不得占据 flexbox 的顶部 150px。这可能会将某些元素推到可视区域下方(参见下图中的“预期结果 3”)
• 理想情况下，纯 CSS 解决方案对于提供的 HTML 元素是可行的

问题

垂直居中的盒子不符合我想放在 flexbox 顶部的 150px 空间，而且我无法创建一种优雅的方式来确保元素不会 float 超过如果我使窗口太短，则在屏幕顶部。也就是说，上图中“Desired Result 3”中的示例仍然难以捉摸。

示例代码

HTML:

body {margin:0; font-family: sans-serif; font-weight:bold;}
.parentFlexBox { 
  background-color:grey;
  display: flex;
  flex-direction: column;
  margin-top:0; 
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  height:100vh;
  width:100vw;
  
}
.itemA, .itemB, .itemC, .itemD { padding:5px; text-align:center; margin-bottom:5px; color:#fff;}
.itemA { background-color:red; width:50px;  margin-top:auto;}
.itemB { background-color:hotpink; width:150px; height:50px}
.itemC { background-color:purple; width:40px; height: 35px}
.itemD { background-color:blue; margin-top:auto; width: 80px;}

<div class="parentFlexBox">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
  <div class="itemD">D</div>
</div>

请全屏运行以上代码以查看问题

Answer 1

这可能对你有用:

HTML(添加两个不可见的 flex 元素)

<div class="parentFlexBox">
    <div class="itemA">A</div>
    <div class="itemB">B</div>
    <div class="itemC">C</div>
    <div class="itemD">D</div>
    <div class="itemE">E</div><!-- invisible spacer item with 150px height -->
    <div class="itemF">F</div><!-- invisible spacer item with 120px height -->
</div>

CSS

.parentFlexBox { justify-content: space-between; } /* changed from `center` */

.itemA { order: 1; } /* removed `margin-top: auto` */

.itemB { order: 2; } 

.itemC { order: 3; }

.itemD { order: 5; height: 30px; } /* added `height` for centering calculation;
                                      removed `margin-top:auto` */
.itemE { 
      order: -1;  
      flex: 0 0 150px; /* don't grow, don't shrink, remain at 150px height */
      visibility: hidden;
      margin-bottom: auto; /* stick to top of container */
}

.itemF {
      order: 4;
      flex: 0 1 120px; /* don't grow, shrink proportionally, start at 120px height */
      visibility: hidden;
      margin-top: auto; /* go south as much as possible (sticks to Item D) */
}

/* NOTE: Item D has height 30px. Item F has height 120px. Together they equal height of
   Item E. Equally balanced on both ends, Items A, B & C are centered in the container. */

DEMO 1

我将间隔 div 放在标记的最后，以保持字母顺序。如果您希望按顺序列出所有 div(包括间隔符)，则不需要 order 属性(property)。

此外，在演示中，代码包含边框，以防您希望看到工作中的间隔符。只需禁用 visibility 属性(property)。

---

更新(基于评论)

Nice, a couple of questions though: 1) Possible to make it so that BCD don't change height when resizing the window? 2) Possible to make the gray background extend to contain D when window is short? 3) Possible to do items E and F as pseudocode elements?

问题 #1: 是的。添加flex: 0 0 <<absolute height>>到 BCD。例如，添加 flex: 0 0 50px每个元素，这告诉他们保持固定在 50px 高度。 (另外，从每个规则中删除 height 属性，以避免与 flex 发生任何潜在冲突。)

问题 #2: 是的。而不是将容器限制为 height: 100vh , 使用 min-height: 100vh .

问题 #3: 是的。从 HTML 和 CSS 中删除 E 和 F 代码，并将其添加到 CSS:

.parentFlexBox::before {
  content: '';
  flex: 0 0 150px;
  visibility: hidden;
  margin-bottom: auto;
}

.parentFlexBox::after {
  content: '';
  flex: 0 1 100px;
  visibility: hidden;
  margin-top: auto;
  order: 4;
}

DEMO 2