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

Question

我们必须在最多 3 列的多行中显示内容块。每个内容块都包含一个heading、description和link。我们flexbox用来连续显示块，使得行的高度被最高的元素占据。但是，我们无法始终将link底部对齐，并且它似乎总是位于每个 的正下方description。

我们如何对齐每个块底部的链接并让每个块仍然是最高块的高度flexbox？

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

代码解释：

1. 每个街区都被包围，.bkg--grey因此您可以看到该街区正按预期占据最高街区的高度。
2. border被添加到每个元素中，flex__item因此您可以看到它占用了多少空间。
3. 每个块包含：heading、description和linkfromtop down (column)

目前的问题：

期望的输出

我们希望不使用float或position: absolute完成这项工作。

标签： htmlcssflexbox

Answer 1

您需要制作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>