Flexbox:在底部和中间之间对齐？

Question

有人知道如何使用flexbox创建此布局吗？

文本将放在中心,按钮将放在文本和底部之间.

我现在有这个:

.aligner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

<div class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <button>BUTTON</button>
</div>

这会对齐中心的所有内容,但我只希望文本位于中心,而中心和底部之间的按钮.

Answer 1

你可以试试这个布局：

• 匿名元素 flex: 1
• 标题和副标题（titles）
• 带有flex: 1和 的元素display: flex。

标题上方和下方的元素将等量占用标题留下的可用空间。所以标题会居中。

这些元素也可以是 flex 容器，您可以根据需要在它们内部对齐它们的内容。

html, body {height: 100% } * { margin: 0; }
.aligner, .below {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.aligner {
  height: 100%;
}
.aligner::before { content: ''; }
.aligner::before, .below {
  flex: 1;
}

<div class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <div class="below">
    <button>BUTTON</button>
  </div>
</div>