html - 如何使用flexbox将链接保持在底部？

我们必须在最多3列的多行中显示内容块。每个内容块包含一个heading，description和link。我们正在使用flexbox在一行中显示块，以便该行的高度被最高的元素占用。但是，我们不能总是将link对齐在底部，并且似乎总是放在每个description的正下方。

如何使用flexbox在每个块的底部对齐链接，并使每个块仍为最高块的高度？

这是我们尝试的方法：https://codepen.io/userrj/pen/WYXoOO

代码说明：


每个图块都被.bkg--grey包围，因此您可以看到该图块正按照预期达到最高块的高度。
border通过flex__item添加到每个元素，因此您可以看到它占用了多少空间。
每个块包含：heading，description和link中的top down (column)


当前的问题：



所需的输出



我们希望不要使用float或position: absolute来完成此操作。

最佳答案

您需要将article设置为flex容器并调整一些对齐方式：

article {
  display: flex;
}
.flex__item > div:last-child {
  margin-top:auto;
}

完整代码：

.flex__item {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex: 0 1 auto;
  flex-direction: column;
}
.flex__col {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.flex__wrapper {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  flex: 0 1 auto;
}
.flex__item {
  padding: 16px;
  border: 1px solid black;
}

.bkg--grey {
  background-color: #ddd;
}

.col--sm-12 {
  width: 100%;
}
.col--md-6 {
  width: 50%;
}
.col--lg-4 {
  width: 33.33%;
}
/*added this*/
article {
  display: flex;
}
.flex__item > div:last-child {
  margin-top:auto;
}
/**/

[class*=col--] {
  box-sizing: border-box;
  padding: 16px;
}

<section class="flex__wrapper">
	<div class="col--sm-12 col--md-6 col--lg-4 flex__col">
		<article class="bkg--grey">
			<div class="flex__item">
				<div>
					<h4>Some Efficiently</h4>
					<p>Efficiently enhance frictionless markets without distinctive deliverables. </p>
				</div>
				<div><a href="#">Read More</a></div>
			</div>
		</article>
	</div>
	<div class="col--sm-12 col--md-6 col--lg-4 flex__col">
		<article class="bkg--grey">
			<div class="flex__item">
				<div>
					<h4>Some Objectively promote</h4>
					<p>Objectively promote enterprise-wide strategic theme areas rather than process-centric catalysts for change. Completely procrastinate sticky best practices and corporate sources. Distinctively unleash superior metrics via go forward alignments. Uniquely reconceptualize plug-and-play e-services through collaborative solutions. Progressively maximize adaptive experiences with. </p>
				</div>
				<div><a href="#">Read More</a></div>
			</div>
		</article>
	</div>
	<div class="col--sm-12 col--md-6 col--lg-4 flex__col">
		<article class="bkg--grey">
			<div class="flex__item">
				<div>
					<h4>Completely create</h4>
					<p>Completely create equity invested relationships for client-focused paradigms. Distinctively benchmark exceptional information before corporate materials. Compellingly pontificate 2.0. </p>
				</div>
				<div><a href="#">Read More</a></div>
			</div>
		</article>
	</div>
	<div class="col--sm-12 col--md-6 col--lg-4 flex__col">
		<article class="bkg--grey">
			<div class="flex__item">
				<div>
					<h4>Distinctively deliver</h4>
					<p>Distinctively deliver one-to-one potentialities with excellent resources. Collaboratively.</p>
				</div>
				<div><a href="#">Read More</a></div>
			</div>
		</article>
	</div>
	<div class="col--sm-12 col--md-6 col--lg-4 flex__col">
		<article class="bkg--grey">
			<div class="flex__item">
				<div>
					<h4>Authoritatively facilitate</h4>
					<p>Authoritatively facilitate sustainable portals through cross-platform catalysts for change. Monotonectally transform e-business total linkage without front-end action items.</p>
				</div>
				<div><a href="#">Read More</a></div>
			</div>
		</article>
	</div>
</section>

关于html - 如何使用flexbox将链接保持在底部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53382858/