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>

revised codepen

Pin a flex item to the bottom of the container

Related

Recent Posts