Pin a Flex Item to The Bottom of The Container

Pin element (flex item) to bottom of container

Updated Answer

With auto margins you can group or pack flex items together without extra markup, or shift elements around by applying a margin in the opposite direction (as seen in my original answer). In this case, simply set margin: auto on the form; this will inform the flex container to center the form within all available space remaining:

.flex-container {  display: flex;  flex-direction: column;  text-align: center;  height: 150px;  width: 400px;  background: #e7e7e7;} form {  margin: auto;}
p {  margin: 0;}

<div class="flex-container">  <form>    <input type="text" />    <button type="submit">submit</button>  </form>  <p class="bot">    Lorem ipsum dolor sit amet  </p></div>

How can I pin an element to the bottom of a div with flexbox?

Switch to flex-direction: column, so that the main axis is vertical, and use margin-top: auto on the buttons.

.outer-div {  display: flex;  flex-direction: column;  height: 100vh}
.buttons {  margin-top: auto;}
body {  margin: 0;}

<div class="outer-div">  <p class="element" href="">element</p>  <small class="other-element">element</small>  <p class="par">word</p>  <div class="buttons">    <button>button 1</button>    <button>button 2</button>  </div></div>

Pin a flex item to the bottom of the container

Since you're working with a row-direction flex container, pinning the last item to the bottom is not possible. You're dealing with cross axis space distribution, which means flex lines are either stretched or packed, and there's no way to pin two items to the top and one to the bottom (unless you go beyond flexbox and use absolute positioning).

Here's a complete explanation.

How does flex-wrap work with align-self, align-items and align-content?

A simple and effective method to make your layout work would be a column-direction container with a flex auto margin on the last item. By aligning your items on the main axis you can space away individual items.

Here's an explanation of flex auto margins:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

/* FLEXBOX RELATED */.grid {  display: flex;  justify-content: space-between;  flex-flow: row wrap;}.block {  flex: 0 24%;  display: flex;}.container {  display: flex;  flex-direction: column; /* new */  /* flex-flow: row wrap; */  /* align-items: flex-start; */}.title {  /* flex: 0 100%; */}.desc {  /* flex: 0 100%; */}.button {  margin-top: auto; /* new */  /* flex: 0 100%; */  /* align-self: flex-end; */}

/* NO FLEXBOX RELATED */.block {  background-color: #ccc;}.title {  font-size: 2rem;  font-weight: bold;  padding: 0.5rem;  text-align: center;}.desc {  background-color: grey;  padding: 0.5rem;}.button {  padding: 0.5rem;  color: blue;  text-align: center;  font-weight: bold;}

<div class="grid">  <div class="block">    <div class="container">      <div class="title">Title 1</div>      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>      <div class="button">Button</div>    </div>  </div>  <div class="block">    <div class="container">      <div class="title">Title 2</div>      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>      <div class="button">Button</div>    </div>  </div>  <div class="block">    <div class="container">      <div class="title">Title 3</div>      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>      <div class="button">Button</div>    </div>  </div>  <div class="block">    <div class="container">      <div class="title">Title 4</div>      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>      <div class="button">Button</div>    </div>  </div></div>

Align an element to bottom with flexbox

You can use auto margins

Prior to alignment via justify-content and align-self,
any positive free space is distributed to auto margins in that
dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {  height: 200px;  border: 1px solid;  display: flex;  flex-direction: column;}h1, h2 {  margin: 0;}a {  margin-top: auto;}

<div class="content">  <h1>heading 1</h1>  <h2>heading 2</h2>  <p>Some text more or less</p>  <a href="/" class="button">Click me</a></div>

Pin element to the bottom of the container

You need to make your div.offer box a (nested) flex container in column-direction. Then pin the view button to the bottom with a flex auto margin.

.offer, .recommendation {
    float: left;
    flex: 1 0 32%;
    margin: 0 0.3%;
    width: 32%;
    position: relative;

    display: flex;          /* new */
    flex-direction: column; /* new */
}

a.view-button {
    float: left;
    padding: 7px 30px;
    background: #e35f00;
    color: #ffffff;
    text-transform: uppercase;
    position: relative;
    bottom: 0;
    left: 0;

    margin-top: auto;       /* new */
}

revised fiddle

A few more things to keep in mind:

Flex layout exists only between parent and child.
Floats are ignored in a flex container.
Avoid using percentages for margin and padding in a flex container.

Aligning to the bottom in flexbox

You need to make the parent a flex container:

.flex-list .flex-row .flex-item-wrapper .flex-item {
    width: 100%;
    height: 100%;
    display: flex;                      /* new */
    flex-direction: column;             /* new */
}

Then, tell the .caption element to fill available height:

.caption { flex: 1; }

Revised Fiddle

It's a common question. Here are other options:

Methods for Aligning Flex Items
Flexbox align to bottom
Pin a flex item to the bottom of the container
Pin element (flex item) to bottom of container
Pin element to the bottom of the container
Pin a button to the bottom corner of a container
Aligning element to bottom with flexbox
Aligning items to the bottom using flex
Align content of flex items to bottom
Align content in a flex container to the bottom
Aligning element to bottom with flexbox
Nested flexbox, align-items do not flex-end
align-content: flex-end not shifting elements to container bottom
Sticky footer with flexbox
Why isn't align-self aligning my div to the bottom of my flexbox?
How to bottom-align an element inside a flex item?
Flexbox difficulties aligning icons to bottom of container
Make an item stick to the bottom using flex in react-native
Equal height columns and align last item to bottom

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

Pin a button to the bottom corner of a container

You just need to make the form element a flex container, because flex properties only work between parent and child elements.

In other words, your align-self: flex-end on the .form-button is not working because the parent – form – does not have display: flex or display: inline-flex applied.

Here's a more complete explanation:

Proper use of flex properties when nesting flex containers

html, body {  height: 100%;}
.container {  height: 100%;  display: flex;  flex-wrap: wrap;  justify-content: center;  align-items: center;}
form {  border: 1px solid gray;  padding: 1em;
  /* NEW */  display: flex;  flex-direction: column;}
.form-button {  margin-top: 1em;  align-self: flex-end;}

<div class="container">  <form>    <div class="form-input">      <label> Name <input type="text" /></label>    </div>    <div class="form-button">      <button type="submit">Submit</button>   </div>  </form></div>

Flexbox Aligning Bottom

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>