Align an Element to Bottom With Flexbox

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>

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

Aligning element to bottom with flexbox

Right now, .slots is a flex container containing flex items. One way to align it with the bottom by using flexbox is by putting it in another flexbox container. This can be visualized by asking the question: "align it to the bottom of what?" The answer is: "to the bottom of another flex container".

So, in addition to being a flex container, .slots can also be a flex item inside another flex container. Then you can align .slots with the bottom of its container.

Below, I've set it's container <body> to be a flex container for the .slots element. This is similar to one of the methods for a "sticky footer", detailed at CSS-Tricks.

html,body {  height: 100%;  margin: 0;}

/* ADDED THIS */body {  display: flex;  flex-direction: column;  justify-content: flex-end;}
div.slots {  background: white;  display: flex;  flex-direction: column;  width: 250px;  /* align-content: flex-end; - NOT NEEDED */}
div.slots div.top_slots {  display: grid;  grid-template-columns: 25% 50% 25%;}
div.slots div.bottom_slots {  display: grid;  grid-template-columns: 25% 25% 25% 25%;}
div.slots div.slot {  display: flex;  align-items: center;  justify-content: center;  cursor: pointer;  background: #676767;  height: 35px;}
div.slots div.slot svg {  fill: #272727;}
div.slots div.slot:hover {  background-color: #8d8d8d;}
div.slots div.pane {  background: grey;  height: 100px;  width: auto;  text-align: center;}

<div class="slots">  <div class="top_slots">    <div class="slot stats">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z"/></svg>    </div>    <div class="inventory slot">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z"/></svg>    </div>    <div class="wear slot">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>    </div>  </div>
  <div class="pane">    Stuff goes here  </div>
  <div class="bottom_slots">    <div class="slot friends_list">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>    </div>    <div class="slot settings">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>    </div>    <div class="slot logout">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z"/></svg>    </div>    <div class="slot quests">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"/></svg>    </div>  </div></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>

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>

Aligning the last div to the bottom of a flexbox

Use margin-top:auto on the last div.

.pricing__tier {  padding: 0;  text-align: center;  display: flex;  flex-direction: column;  width: 25%;  flex: 1;  height: 200px; /* for demo purposes */  border: 1px solid grey;}
.uni-card-body {  display: flex;  flex-direction: column;  flex: 1;}
.card-vat-fee {  margin-top: auto; /* push to bottom */  background: green;}

<div class='pricing__tier'>  <div class='uni-card-header'>  </div>  <div class='uni-card-body'>    <div class='uni-row-on'>    </div>    <div class='uni-row-off'>    </div>    <div class='uni-row-on card-vat-fee'>      <div class='vat-fee-text'>        Credit card fees and VAT apply. See below for details.      </div>    </div>  </div></div>

Can't Align to Bottom in a Flex Row

Use a flex layout in the left-hand column with flex-direction: column. By using justify-content: space-between, then second item will be sent to the bottom.

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
  }

.flex-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mf6 {flex: 0 0 50%;}

.theme-split-1 { background-color: #a7ef76; color: black }

<div class="flex-row">
  <div class="flex-col mf6" style="border-bottom: 6px solid black;">
      <div class="mf6">
        <p>Our students set the bar</p>
      </div>

      <div class="theme-split-1" style="border-bottom: 6px solid red;">
          <p>Programs such as </p>
      </div>

  </div>

  <div class="mf6" style="">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>

  </div>

</div>

Using flexbox to Align content at the bottom of container horizontally

You could utilize CSS Flexbox and make .bottom a flex container to position the items in a row. Next, use justify-content to define how the flex items should be distributed along the main axis (x-direction in a row format). One option is to use justify-content: space-evenly while defining an explicit width for the parent container.

You were on the right track by making the parent div .container a flexbox in column format, the last thing it needed was to specify justify-content: space-between to define the amount of space that should be distributed between and around the flex items.

Using space-between will take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item.

Essentially, justify-content in a flexbox column layout refers to the main axis (y-direction) and how items should be aligned along this axis.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  max-width: 300px;
  min-height: 400px;
  border: 2px solid black;
  border-radius: 10%;
}

.card-top {
position: relative;
background-image: url(bg-pattern-card.svg);
background-size: cover;
width: 100%;
height:30%;
border-bottom: black solid 2px;
align-items: center;
}

.victor {
/*margin-top: 50px;*/
border-radius: 50%;
}

.center{
margin-top: 35px;

}

.bottom {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  bottom: 0;
  border-top: 2px solid black;
}

.bottom p {
  color: #000;
  font-weight: 700;
}

.bottom p > span {
  color: #222;
  font-size: .8rem;
}

<div class="container">
    <div class="card-top">
 <p>
  <img class="victor" src="image-victor.jpg" alt="the homie">
</p>
</div>
<div class="center">
<p>
  <span>
  <b>Victor Crest</b>
  26
</span>
<p>
  London
</p>
</p>
</div>

<div class="bottom">
  <p>
  80K<br>
  <span>Followers</span>
</p>
<p>
  803K<br>
  <span>Likes</span>
</p>
<p>
  1.4K<br>
  <span>Photos</span>
</p>
  </div>
    </div>

align a child div to bottom inside div of flex box

You can add flex properties on flex-container>div like below:

.flex-container {
  display: flex;
  height: 500px;
  background-color: #f1f1f1;
}

.flex-container>div {
  color: red;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vertical {
  box-shadow: inset 0px 4px 6px #ccc;
}

.progress {
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  box-shadow: inset 0px 4px 6px rgba(100, 100, 100, 0.6);
}

.progress-bar-info {
  background-color: #5bc0de;
}

.progress-bar {
  box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
}

<div class="flex-container">
  <div class="progress vertical">
    <div>1</div>
    <div class="progress-bar progress-bar-info" style="height: 35%;">Bottom</div>
  </div>
</div>

Bootstrap element to bottom with flexbox

If I set height: 100% to container or on my section also not work.

You need to set body and html's height to 100% as well. Because they wrap all of your content.

Then, you can use flexbox layout model to put your get-tour at the bottom of your page.

body,html {  height: 100%;}
section {  height: 100%;}
section .container {  height: 100%;  display: flex;  flex-direction: column;  justify-content: space-between;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><style>  .get-tour .form-block {    display: inline-block;  }    .get-tour .form-block label {    display: block;  }</style>
<section style="min-height: 450px">  <div class="container">    <div class="row">      <div class="col-lg-8">        Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto      </div>      <div class="col-lg-3">        Use the .flex-fill class on a series of sibling elements to force them into widths .... align-items , flex-direction: column , and margin-top: auto      </div>    </div>    <div class="element">
      <div class="get-tour ">        <form action="">          <div class="form-block">            <label>When</label>            <input type="text">          </div>          <div class="form-block">            <label>Date </label>            <input type="text">          </div>          <div class="form-block">            <label>Qty ночей</label>            <input type="text">          </div>          <div class="form-block">            <label>Who</label>            <input type="text">          </div>          <div class="form-block">            <label>Type</label>            <input type="text">          </div>          <div class="form-block">            <button type="submit">Search</button>          </div>        </form>      </div>
    </div>  </div></section>

Align an Element to Bottom With Flexbox