html - 如何底部对齐 flex 元素内的元素？

Question

我有一个 flex 容器，其中包含三个 flex 元素，每个元素内部都有一个底部对齐的链接(所有链接底部中间对齐)。

flex 元素被拉伸(stretch)并且没有固定高度，与 flex 容器相同。谢谢!

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-item {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  padding: 15px;
}

<section class="main-section">
  <div class="container">
    <div class="flex-container">
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus. Sed pellentesque non arcu et interdum. Aenean venenatis, ipsum a viverra interdum, neque nisl tincidunt
          arcu, non vulputate justo metus nec quam. Nullam blandit, purus id pretium congue, turpis diam semper sapien, vel suscipit est velit eget leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
          consequat urna quis commodo varius. Praesent hendrerit at augue in fermentum. Ut sed dolor blandit, lacinia orci eget, ultrices elit. Nulla luctus, risus eu viverra eleifend, leo orci posuere nulla, ut vestibulum orci metus in nisi. Aenean et
          porttitor lacus.</p>
        <a href="#">Link</a>
      </div>
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus.</p>
        <a href="#">Link</a>
      </div>
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus. Sed pellentesque non arcu et interdum. Aenean venenatis, ipsum a viverra interdum, neque nisl tincidunt
          arcu, non vulputate justo metus nec quam. Nullam blandit, purus id pretium congue, turpis diam semper sapien, vel suscipit est velit eget leo.</p>
        <a href="#">Link</a>
      </div>
    </div>
  </div>
</section>

https://jsfiddle.net/ABoooo/dns5zr1p/

Answer 1

首先，从容器中移除 align-items: flex-start。这会覆盖 stretch 默认值，因此列不会拉伸(stretch)容器的整个高度。它们的值(value)取决于它们的内容。

其次，使用 flex-direction: column 将您的 flex 元素放入(嵌套的) flex 容器中。然后，您可以在链接上使用 auto 边距将其固定到底部。

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: flex-start;
  /* align-items: flex-start; <--------- REMOVE */
}

.flex-item {
  flex: 1 0 0;
  padding: 15px;
  
  display: flex;                /* NEW */
  flex-direction: column;       /* NEW */
}

.flex-item > a {
  margin-top: auto;             /* NEW */
  align-self: center;           /* NEW (optional; horizontal centering) */
}

<section class="main-section">
  <div class="container">
    <div class="flex-container">
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus. Sed pellentesque non arcu et interdum. Aenean venenatis, ipsum a viverra interdum, neque nisl tincidunt
          arcu, non vulputate justo metus nec quam. Nullam blandit, purus id pretium congue, turpis diam semper sapien, vel suscipit est velit eget leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
          consequat urna quis commodo varius. Praesent hendrerit at augue in fermentum. Ut sed dolor blandit, lacinia orci eget, ultrices elit. Nulla luctus, risus eu viverra eleifend, leo orci posuere nulla, ut vestibulum orci metus in nisi. Aenean et
          porttitor lacus.</p>
        <a href="#">Link</a>
      </div>
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus.</p>
        <a href="#">Link</a>
      </div>
      <div class="flex-item">
        <p class="subTitle">Titel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim ante turpis, sit amet suscipit velit consequat id. Donec a est tellus. Sed pellentesque non arcu et interdum. Aenean venenatis, ipsum a viverra interdum, neque nisl tincidunt
          arcu, non vulputate justo metus nec quam. Nullam blandit, purus id pretium congue, turpis diam semper sapien, vel suscipit est velit eget leo.</p>
        <a href="#">Link</a>
      </div>
    </div>
  </div>
</section>

revised fiddle

关于 flex auto 边距的更多信息:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?