html - 如何让 flexbox 将中心固定和底部固定的 child 放在一起？

Question

我正在尝试通过 flexbox 获得以下类型的布局。

|                      |
|                      |
| CENTER FIXED ELEMENT |
|                      |
| BOTTOM FIXED ELEMENT |

这是我粗略的 flexbox CSS。

.wrapper{
    display:flex;
    justify-content:center;
    flex-direction:column;
}
.bottom-element {
    align-self:flex-end;
}

背后的想法是，wrapper 中的任何内容都会居中对齐，而 .bottom-element 会将其自身对齐到框的底部。

然而，这并不像预期的那样工作，底部元素 出现在中心元素 之后。

还有其他解决办法吗？还是我可能错过的愚蠢的事情？

Answer 1

更新 1:

将整个“包装”的“中间”div 垂直居中。

.wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border: 1px solid red;
}

.middle,
.bottom {
  background: aqua;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="wrapper">
  <div class="middle">middle</div>
  <div class="bottom">bottom</div>
</div>

更新 2:

在“wrapper”减去“bottom”的可用空间内垂直居中“middle”div。

.wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.middle,
.bottom {
  background: aqua;
  margin-top: auto;
}

<div class="wrapper">
  <div class="middle">middle</div>
  <div class="bottom">bottom</div>
</div>

上一个答案:

想法是用 CSS 伪内容为顶部元素创建一个空占位符，然后只需使用 flex-direction: column; + justify-content: space-between; 垂直对齐所有 3 个元素。

注意:当涉及到 flex 元素中的多行文本时，中间的 div 可能不会绝对在中间。

.wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid red;
}

.wrapper:before {
  content: "\00A0";
}

.wrapper>div {
  background: aqua;
}

<div class="wrapper">
  <div>middle</div>
  <div>bottom</div>
</div>