How to keep link at the bottom using flexbox? - html

Question

We have to display blocks of content in many rows with max 3 columns. Each block of content contains a heading, description, and link. We are using flexbox to display the blocks in a row such that the height of the row is taken up by the tallest element. However, we are not able to always align the link at the bottom and it always seems to be place right below each description.
How can we align the link in the bottom of each block and have each block still be the height of the tallest block using flexbox?
Here is what we have tried: https://codepen.io/userrj/pen/WYXoOO
Code explained:
each block is surrounded by .bkg--grey so you can see the block is taking the height of the tallest block as expected.
border is added to each element with flex__item so you can see how much space it is taking up.
each block contains: heading, description, and link from top down (column)
Current issue:
Desired output
We are hoping to not use float or position: absolute to get this done.

Answer 1

You need to make article a flex container and adjust some alignment:
article {
display: flex;
}
.flex__item > div:last-child {
margin-top:auto;
}
Full code:
.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>Read More</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>Read More</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>Read More</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>Read More</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>Read More</div>
</div>
</article>
</div>
</section>