Flexbox Aligning Bottom [duplicate] - html

Question

This question already has an answer here:
Pin a flex item to the bottom of the container
(1 answer)
Closed 5 years ago.
I have a series of cards using flexbox, and I'd like to have the bottom element (in this case a podcast widget) align to the bottom (flex-end) while the others align to the top.
I am fairly new to front-end web development and feel a bit like I'm just missing some fundamental idea to getting this to work. Thanks for your help!
Here is my current codepen where I'd like to get that to stick to the bottom.
html,
body {
font-family: sans-serif;
font-size: 16px;
}
/* Typography and Helpers */
.text-right {
text-align: right;
}
/* layout */
section {
display: block;
padding: 2rem 0;
}
.container {
width: 1200px;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.columns {
display: flex;
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem;
/* - margins are for nesting */
}
.columns:last-child {
margin-bottom: -0.75rem;
}
.columns:not(:last-child) {
margin-bottom: 0.75rem;
}
.column {
display: block;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
padding: 0.75rem;
}
.align-bottom-container {
margin-top: auto;
align-items: flex-end;
}
.align-bottom-item {
margin-top: auto;
display: block;
}
/* layout alignment */
.align-items-bottom {
align-items: flex-end;
display: flex;
justify-content: center;
}
.flex {
display: flex;
}
/* cards */
.flex-card {
border-left: .5em solid #0093d0;
background-color: #f7f7f7;
padding: 1em 1em 0 1em;
}
.two {
width: 50%;
flex-basis: 50%;
min-width: 50%;
}
.card-content {
padding: 1.5rem;
}
.blog-category {}
.blog-title {}
.blog-meta {}
.blog-description {}
<section class="container">
<div class="columns">
<div class="column">
<div class="flex-card">
<div class="card-content">
<p class="blog-category">Expert Strategies</p>
<div class="columns">
<p class="column blog-title">Pivot to Purchase</p>
<p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
</div>
<p class="blog-description">If technology can be a disruptor - it will. Zillow has a pilot program that...</p>
<button>Read More</button>
</div>
</div>
<footer class="align-bottom-container">
<a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies: Audit Your Brand" on Spreaker.</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>
</footer>
</div>
<div class="column">
<div class="flex-card">
<div class="card-content">
<p class="blog-category">Expert Strategies</p>
<div class="columns">
<p class="column blog-title">Pivot to Purchase</p>
<p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
</div>
<p class="blog-description">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus voluptatibus provident inventore velit impedit maxime asperiores consequuntur, ex veritatis libero aspernatur itaque quidem, harum accusamus dolorem, vel similique delectus
distinctio.
</div>
</p>
<button>Read More</button>
</div>
</div>
<footer><a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies: Audit Your Brand" on Spreaker.</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>
</footer>
</div>
</div>
</section>

Answer 1

The flex property of align-items: flex-end; belongs to the parent of flex items you are trying to align, the problem here is that you are trying to apply this property to your "footer", which is a child of what you assume is your flex parent. The parent of your footer is in fact the .column class which has the property of display: block;.
To achieve what you desire will only require the addition of these two lines to your .column class
display: flex;
flex-direction: column;
Which will then enable your margin-top: 0; property to take effect.
An alternative is to use the property justify-content: flex-end; which belongs to the parent of flex items/children. So your footer will align to the end of your parent. And then using the property margin-bottom: 0; on the flex-card to "float" it away from the footer.
.column {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.flex-card {
margin-bottom: auto;
border-left: .5em solid #0093d0;
background-color: #f7f7f7;
padding: 1em 1em 0 1em;
}
html,
body {
font-family: sans-serif;
font-size: 16px;
}
/* Typography and Helpers */
.text-right {
text-align: right;
}
/* layout */
section {
display: block;
padding: 2rem 0;
}
.container {
width: 1200px;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.columns {
display: flex;
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem;
/* - margins are for nesting */
}
.columns:last-child {
margin-bottom: -0.75rem;
}
.columns:not(:last-child) {
margin-bottom: 0.75rem;
}
.column {
display: flex;
flex-direction: column;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
padding: 0.75rem;
}
.align-bottom-container {
margin-top: auto;
align-items: flex-end;
}
.align-bottom-item {
margin-top: auto;
display: block;
}
/* layout alignment */
.align-items-bottom {
display: flex;
justify-content: center;
}
.flex {
display: flex;
}
/* cards */
.flex-card {
border-left: .5em solid #0093d0;
background-color: #f7f7f7;
padding: 1em 1em 0 1em;
}
.two {
width: 50%;
flex-basis: 50%;
min-width: 50%;
}
.card-content {
padding: 1.5rem;
}
.blog-category {}
.blog-title {}
.blog-meta {}
.blog-description {}
<section class="container">
<div class="columns">
<div class="column">
<div class="flex-card">
<div class="card-content">
<p class="blog-category">Expert Strategies</p>
<div class="columns">
<p class="column blog-title">Pivot to Purchase</p>
<p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
</div>
<p class="blog-description">If technology can be a disruptor - it will. Zillow has a pilot program that...</p>
<button>Read More</button>
</div>
</div>
<footer class="align-bottom-container">
<a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies: Audit Your Brand" on Spreaker.</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>
</footer>
</div>
<div class="column">
<div class="flex-card">
<div class="card-content">
<p class="blog-category">Expert Strategies</p>
<div class="columns">
<p class="column blog-title">Pivot to Purchase</p>
<p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
</div>
<p class="blog-description">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus voluptatibus provident inventore velit impedit maxime asperiores consequuntur, ex veritatis libero aspernatur itaque quidem, harum accusamus dolorem, vel similique delectus
distinctio.
</div>
</p>
<button>Read More</button>
</div>
</div>
<footer><a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies: Audit Your Brand" on Spreaker.</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>
</footer>
</div>
</div>
</section>