如何底部对齐flex项目中的元素？

时间：2017-07-06 13:34:44

标签： html css css3 flexbox

我有一个带有三个弹性项目的弹性容器，每个项目内部都有一个应该在底部对齐的链接（所有链接底部中间对齐）。

Flex-items被拉伸并且没有固定高度，与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/

2 个答案:

答案 0 :(得分：4)

首先，从容器中删除align-items: flex-start。这会覆盖stretch默认值，因此列不会拉伸容器的整个高度。它们只有它们的内容一样高。

其次，使用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页边距的更多信息：

答案 1 :(得分：0)

将position: absolute;放在您的a代码上，将position: relative;添加到您的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;
  position: relative;
}

.flex-item a {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
<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>

相关问题
最新问题