Flexbox：在底部和中心之间对齐？ [复制]答案

【问题标题】：Flexbox: Align between bottom and center? [duplicate]Flexbox：在底部和中心之间对齐？ [复制]
【发布时间】：2016-02-29 21:00:39
【问题描述】：

有人知道如何使用 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>

这使所有内容都居中对齐，但我只希望文本居中，并且按钮位于居中和底部之间。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

您可以使用auto margins 与不可见的弹性项目的组合来实现布局：

（编辑：我在使用示例代码更新问题之前写了这个答案。所以我的代码与问题中的不同。但该方法仍然适用。）

html, body {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

.container > div:nth-child(1) { margin-top: auto; visibility: hidden; }
.container > div:nth-child(2) { margin-top: auto; }
.container > div:nth-child(3) { margin-top: auto; margin-bottom: auto; }

/* non-essential decorative styles */
.container {
    background-color: yellow;
}
.box {
    height: 50px;
    width: 150px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    box-sizing: border-box;
}

<div class="container">
  <div class="box">BUTTON</div><!-- invisible flex item -->
  <div class="box">SUPERMAN</div>
  <div class="box">BUTTON</div>
</div>

jsFiddle

另外，通过两个小调整，底部项目可以与边缘齐平。

.container > div:nth-child(1) { /* margin-top: auto; */ visibility: hidden; }
.container > div:nth-child(2) { margin-top: auto; }
.container > div:nth-child(3) { margin-top: auto; /* margin-bottom: auto; */ }

jsFiddle

或者，只需使用justify-content: space-between：

.container > div:nth-child(1) { visibility: hidden; }
/* .container > div:nth-child(2) { margin-top: auto; } */
/* .container > div:nth-child(3) { margin-top: auto;  } */

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: yellow;
    height: 100%;
    box-sizing: border-box;
    justify-content: space-between; /* NEW */
}

jsFiddle

有关更多对齐选项，请参阅：Methods for Aligning Flex Items

【讨论】：

@Michael_B 谢谢伙计，这似乎也是一个好方法。今天晚些时候我会测试它！

【解决方案2】：

你可以试试这个布局：

flex: 1 的匿名元素
标题和副标题（titles）
带有flex: 1 和display: 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>

【讨论】：