Flexbox Aligning Bottom

Question

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>

@Michael_B The value in this specific question and my answer comes with my explanation of parent/child properties of flex-box and how the parent was not properly defined. — Kanstantsin Arlouski, Aug 16 '17 at 18:15
@KanstantsinArlouski, that value remains intact. Your answer is still there. But this question is a duplicate of at least 10 other posts I've seen. — Michael Benjamin, Aug 16 '17 at 18:37
@Michael_B My apologies. I brought it up, because I thought duplicate questions are deleted. — Kanstantsin Arlouski, Aug 16 '17 at 19:00

Kanstantsin Arlouski · Accepted Answer · 2017-08-16T18:02:05.897

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>

Truly appreciate the fast and correct response! Not only did this work, but using this method has allowed me to delete more than a handful of alignment classes I was using to trick flexbox rows into behaving like columns. — Kerrigan D, Aug 16 '17 at 19:58

Flexbox Aligning Bottom

1 Answers1