如何让 flexbox 的中心固定和底部固定 children 在一起？

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：

整个 'wrapper'.'middle' 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'.

的可用 space 内垂直居中 '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 个元素。

注意：中间div可能不是绝对在中间当涉及到flex项目中的多行文本时

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

.wrapper:before {
  content: "[=14=]A0";
}

.wrapper>div {
  background: aqua;
}

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

Answer 2

.container {
  display: flex;
  flex-direction: column;
  background-color: red;
  height: 10em; 
}
.third {
  margin-top: auto;
}
.first{
  margin-top: auto;
}

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

如何让 flexbox 的中心固定和底部固定 children 在一起？

How do I get a flexbox to have a center fixed and a bottom fixed children together?

html

css

layout

flexbox

更新 1：

更新 2：

上一个回答：