Flexbox：底部和中心之间对齐？ [英] Flexbox: Align between bottom and center?

问题描述

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

Does someone know how to create this layout, using flexbox?:

文本将放置在中心，按钮将放置在文本和底部之间。

The text is going to be placed in the center, and the button is going to be placed between the text and bottom.

现在：

HTML ：

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

CSS：

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

这样就对齐了中心的所有内容，但我只想让文本

This aligns everything in the center, but I want only the text to be in center, and the button between center and the bottom.

推荐答案

您可以尝试此布局：

• flex：1
的匿名元素

• 标题和字幕）


• 元素与 flex：1 和 display：flex li>
  

• Anonymous element with flex: 1
• The title and subtitle (titles)
• Element with flex: 1 and display: flex.

标题上方和下方的元素将等于标题剩余的可用空间。

The elements above and below the title will take available space left by titles in equal amounts. So the titles will become centered.

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

Those elements can also be flex containers, and you can align their contents inside them as desired.

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>

这篇关于Flexbox：底部和中心之间对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！