如何将文本与 flex-basis 项目的底部对齐？答案

【问题标题】：How to align text to the bottom of a flex-basis item?如何将文本与 flex-basis 项目的底部对齐？
【发布时间】：2018-05-26 03:10:19
【问题描述】：

我想将.second 段落上的文本对齐为底部对齐。我必须设置margin-top: auto 将整个元素与底部对齐，但文本仍与该元素的顶部对齐，我需要在.second 上方留一个空格。 flex-basis 提供了额外的空间，而我需要的 min-height 没有固定边距。

如何在 flex-basis 项目中垂直对齐文本？

.column{
  display: flex;
  flex-direction: column;
}

h1{
  flex-basis: 70px;
}

.second{
  flex-basis: 80px;
  background-color: red;
  margin-top: auto;
}

<div class="column">
    <h1>Subscribe</h1>
    <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p>
    <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

【问题讨论】：

stackoverflow.com/q/25311541/3597276

标签： html css flexbox

【解决方案1】：

将display: flex 和align-items: flex-end 分配给.second div：

.column {
  display: flex;
  flex-direction: column;
}

h1 {
  flex-basis: 70px;
}

.second {
  display: flex;
  align-items: flex-end;
  flex-basis: 80px;
  background-color: red;
  margin-top: auto;
}

<div class="column">
  <h1>Subscribe</h1>
  <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p>
  <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

【讨论】：

【解决方案2】：

使它也成为一个弹性容器，并使用align-items: flex-end 将内容推送到底部。

堆栈sn-p

.column{
  display: flex;
  flex-direction: column;
}

h1{
  flex-basis: 70px;
}

.second{
  flex-basis: 80px;
  background-color: red;
  margin-top: auto;

  display: flex;                    /*  added  */
  align-items: flex-end;            /*  added  */
}

<div class="column">
    <h1>Subscribe</h1>
    <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p>
    <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

【讨论】：