Question

我想将.second段落上的文字对齐为底部对齐。我必须设置margin-top: auto以将整个元素对齐到底部，但文本仍然与该元素的顶部对齐，我需要.second之上的空格。 flex-basis提供了额外的空间和我需要的min-height，而没有固定的保证金。

如何在弹性基础项目中垂直对齐文本？

.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

将它设为灵活容器，并使用align-items: flex-end将内容推送到底部。

Stack snippet

＆＃13;

.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  */
}

＆＃13;

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

＆＃13;

Answer 2

将display: flex和align-items: flex-end提供给.second div ：

＆＃13;

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

＆＃13;

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

＆＃13;

如何将文本与Flex基础项的底部对齐？

2 个答案: