html - 如何将文本对齐到 flex-basis 元素的底部？

Question

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

如何在 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>

Answer 1

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

堆栈片段

.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>