如何底部对齐弹性项目内的元素? [英] How to bottom-align an element inside a flex item?
问题描述
我有一个包含三个 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>