如何底部对齐弹性项目内的元素? [英] How to bottom-align an element inside a flex item?

查看：14
本文介绍了如何底部对齐弹性项目内的元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个包含三个 flex 项目的 flex 容器，每个项目内部都有一个链接，该链接应该在底部对齐(所有链接底部中间对齐).

Flex 项目被拉伸并且没有固定高度，与 flex 容器相同.谢谢！

.flex-container {显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-flex-direction: 行；-ms-flex-direction:行；弹性方向:行；-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content:中心；-ms-flex-pack:居中；对齐内容:居中；-webkit-align-content: flex-start;-ms-flex-line-pack: 开始；对齐内容:flex-start；-webkit-align-items: flex-start;-ms-flex-align:开始；对齐项目:flex-start；}.flex-item {-webkit-order: 0;-ms-flex-order: 0;订单:0；-webkit-flex: 1 0 0;-ms-flex: 1 0 0;弹性:1 0 0；-webkit-align-self:拉伸；-ms-flex-item-align: 拉伸；对齐自我:伸展；填充:15px；}

<div class="容器"><div class="flex-container"><div class="flex-item"><p class="subTitle">Titel</p><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Phasellus dignissim ante turpis，坐 amet suscipit velit consequat id.Donec a est Tellus.Sed pellentesque non arcu et interdum.Aenean venenatis, ipsum a viverra interdum, neque nisl tinciduntarcu, non vulputate justo metus nec quam.Nullam blandit、purus id pretium congue、turpis diam semper sapien、vel suscipit est velit eget leo.Pellentesque 居民 morbi tristique senectus et netus etmalesuada Fames ac turpis egestas.先行者consequat urna quis commodo varius.Praesent hendrerit at augue infermentum.Ut sed dolor blandit、lacinia orci eget、ultrices elit.Nulla luctus, risus eu viverra eleifend, leo orci posuere nulla, ut prestibulum orci metus in nisi.埃涅斯等porttitor lacus.</p><a href="#">链接</a>

<div class="flex-item"><p class="subTitle">Titel</p><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Phasellus dignissim ante turpis，坐 amet suscipit velit consequat id.Donec a esttellus.</p><a href="#">链接</a>

<div class="flex-item"><p class="subTitle">Titel</p><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Phasellus dignissim ante turpis，坐 amet suscipit velit consequat id.Donec a est Tellus.Sed pellentesque non arcu et interdum.Aenean venenatis, ipsum a viverra interdum, neque nisl tinciduntarcu, 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="#">链接</a>

</section>

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

解决方案

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

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

.flex-container {显示:弹性；弹性方向:行；flex-wrap: nowrap;对齐内容:居中；对齐内容:flex-start；/* 对齐项目: flex-start;<--------- 删除 */}.flex-item {弹性:1 0 0；填充:15px；显示:弹性；/* 新的 */弹性方向:列；/* 新的 */}.flex-item >一个 {边距顶部:自动；/* 新的 */对齐自我:居中；/* 新(可选；水平居中)*/}

<div class="容器"><div class="flex-container"><div class="flex-item"><p class="subTitle">Titel</p><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Phasellus dignissim ante turpis，坐 amet suscipit velit consequat id.Donec a est Tellus.Sed pellentesque non arcu et interdum.Aenean venenatis, ipsum a viverra interdum, neque nisl tinciduntarcu, non vulputate justo metus nec quam.Nullam blandit、purus id pretium congue、turpis diam semper sapien、vel suscipit est velit eget leo.Pellentesque 居民 morbi tristique senectus et netus etmalesuada Fames ac turpis egestas.先行者consequat urna quis commodo varius.Praesent hendrerit at augue infermentum.Ut sed dolor blandit、lacinia orci eget、ultrices elit.Nulla luctus, risus eu viverra eleifend, leo orci posuere nulla, ut prestibulum orci metus in nisi.埃涅斯等porttitor lacus.</p><a href="#">链接</a>

<div class="flex-item"><p class="subTitle">Titel</p><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Phasellus dignissim ante turpis，坐 amet suscipit velit consequat id.Donec a esttellus.</p><a href="#">链接</a>

<div class="flex-item"><p class="subTitle">Titel</p><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Phasellus dignissim ante turpis，坐 amet suscipit velit consequat id.Donec a est Tellus.Sed pellentesque non arcu et interdum.Aenean venenatis, ipsum a viverra interdum, neque nisl tinciduntarcu, 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="#">链接</a>

</section>

修正小提琴

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

I have a flex container with three flex items and inside each item a link that should be aligned on the bottom (all links bottom middle aligned).

Flex-items are stretched and do not have a fix height, same as flex container. Thanks!

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

解决方案

First, remove align-items: flex-start from the container. That's overriding the stretch default, so the columns are not stretching the full height of the container. They are only as high as their content.

Second, make your flex items into (nested) flex containers with flex-direction: column. You can then use an auto margin on the link to fix it to the bottom.

.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

More info on flex auto margins:

这篇关于如何底部对齐弹性项目内的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆