Aligning to The Bottom in 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>

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 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>

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>

How to align Items at the top and on the bottom in a Sidebar with flexbox?

To get what you want, apply margin-top: auto; to the first element that should be part of the "bottom-group", and leave the justify-content setting of the flex container at its default (i.e. no definition for that setting). Also, you need to define a height for the flex container, otherwise it will only have the added height of all its children by default (I made it 100vh, i.e. full viewport height, but adjust that as needed):

(note: view the snippet in full page view, otherwise it's not high enough to show the desired result)

html, body {
  margin: 0;
}
.sidebarleft {
  background-color: rgb(25, 20, 26);
  display: flex;
  flex-direction: column;
  flex: 0 0 50px;
  height: 100vh;
}

.sidebarleft-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: none;
  background-color: inherit;
  color: rgb(100, 110, 122);
}
.sidebarleft-button:nth-child(4) {
  margin-top: auto;
}
<div class="sidebarleft">
  <button class="sidebarleft-button">A</button>
  <button class="sidebarleft-button">B</button>
  <button class="sidebarleft-button">C</button>

  <button class="sidebarleft-button">Y</button>
  <!-- this Item should be on the bottom -->
  <button class="sidebarleft-button">Z</button>
  <!-- this Item should be on the bottom -->
</div>

Align content in a flex container to the bottom

Yes, but since you don't have a specified height on the container, it defaults to height: auto (content height), and there's no free space to move down.

Once you define a height which allows for extra space, the items can move down with align-items: flex-end on the container, or align-self: flex-end on the items (like you have).

Aligning a single child to the bottom of a flex container

If I understand it correctly you are trying something like this using the same markup? 

body {
  margin: 0;
}

.section__intro {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    &__button {
      align-self: left;
      margin-bottom: auto;
    }
    &__scroll {
      margin: 0 auto;
    }
    &__title {
      margin-top: auto;
    }
}

view in codepen

How can I align the last child of a flex element to the bottom?

You could add the following to have your paragraph tag take up space to push the items down by adding:

.box > p {
  flex: 1;
}

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

.box {
    display: flex;
    flex-direction: column;
    border: 2px solid lightcoral;
    min-width: 300px;
    max-width: 420px;
    margin: 1em;
    border-radius: 10px;
    padding: 1em;
}

.box > p {
  flex: 1;
}

.elements {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1em 0em 0em 0em;
}

.itm {
    position: relative;
    display: inline-block;
    margin: 1em;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
    padding: 0.5em;
}
<div class="section">
    <div class="box">
        <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
    <div class="box">
        <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
    <div class="box">
        <p>Short text short text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
</div>

Bottom-align text in a flex item

You have the "buttons" set to column-direction flex containers:

.service-square-row .span4  {
    display: flex;
    flex-direction: column;
}

But the first child (flex item) of the container is set to flex-grow: 0, which is the default setting. So the h3 text has a limited range of motion.

Try this instead:

.span4 > .flex-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: green;
}

.service-square-row .service-square p:last-child {
    /* margin-top: auto; */
    margin-bottom: 30px;
    text-align: center;
}

revised codepen

div.row {  width: 100%;  float: left;  background-repeat: no-repeat !important;}
a {  color: #337ab7;  text-decoration: none;}
.service-square-row .span4,.service-square-row .span3,.service-square-row .span6 {  display: flex;  flex-direction: column;}
.service-square-row .wrapper {  display: flex;  justify-content: space-evenly;  flex-wrap: wrap;}
.services.service-square-row .span4 {  width: 260px;  border-radius: 3px;  margin: 10px;  position: relative;  background: #013ca6;  max-width: 260px;  height: 300px;}
.service-square p:first-child {  margin-top: 15px;  height: 126px;}
.service-square-row .flex-link .span4 img,.service-square-row .flex-link .span3 img {  max-height: 126px;}
img {  vertical-align: middle;}
img,video {  height: auto;  max-width: 100%;}
.service-square-row .flex-link img,.service-square-row .flex-link img {  height: 126px;  width: 126px}
.service-square-row h3 {  margin-top: auto;  font-size: 20px;  width: 95%;  padding: 0;  margin-left: 2.5%;  margin-right: 2.5%;  color: white;  text-transform: uppercase;  font-weight: 400;  font-size: 25px;}
.service-square-row .service-square p:last-child {  /* margin-top: auto; */  margin-bottom: 30px;  text-align: center;}
a.btn-bt.default,a.btn-bt.alternate {  font-weight: 400;  border-radius: 4px;  text-transform: uppercase;  text-align: center;  letter-spacing: 0;  padding: 10px 50px;}
a.btn-bt.alternate {  color: #ffffff;  font-size: 14px;  background: #e31d1a;  letter-spacing: px;}
.span4>.flex-link {  flex: 1;  display: flex;  flex-direction: column;  justify-content: space-between;  background-color: green;  /* demo only; illustrates full range of element */}
<div class="row three-thirds services service-square-row  default-padding light-header light-content" style="">
  <div class="wrapper">    <a class="flex-link" href="/electronics-restoration/">      <div class="span4 service-square sq-1 service-1" style="border-style:;">        <p style="text-align: center;"><img class="alignnone size-full wp-image-484" src="https://via.placeholder.com/120x120" alt="Sample Image" width="120" height="120"></p>
        <h3 style="text-align: center;">Electronics</h3>        <p style="text-align: center;"><a class="btn-bt alternate" href="/electronics-restoration/">Learn More</a></p>      </div>    </a>    <a class="flex-link" href="/art-and-document-recovery/">      <div class="span4 service-square sq-2 service-2" style="border-style:;">        <p style="text-align: center;"><img class="alignnone size-full wp-image-485" src="https://via.placeholder.com/120x120" alt="Sample Image" width="106" height="139"></p>
        <h3 style="text-align: center;">Art & Document Recovery</h3>        <p style="text-align: center;"><a class="btn-bt alternate" href="/art-and-document-recovery/">Learn More</a></p>      </div>    </a>    <a class="flex-link" href="#">      <div class="span4 service-square sq-3 service-3" style="border-style:;">        <p style="text-align: center;"><img class="alignnone size-full wp-image-486" src="https://via.placeholder.com/120x120" alt="Sample Image" width="140" height="143"></p>
        <h3 style="text-align: center;">Wind, Hurricane, & Tornado</h3>        <p style="text-align: center;"><a class="btn-bt alternate" href="#">Learn More</a></p>      </div>    </a>  </div></div>

Related Topics

Load Iframe Links into Parent Window

HTML.Beginform() with an Absolute Url

How to Set Gaps (Gutters) in a Flex Container

Favicon: .Ico or .Png/Correct Tags

How to Get a Flexbox to Have a Center Fixed and a Bottom Fixed Children Together

Why Would Google Use a Font Tag

How to Get Placeholder Text in Firefox and Other Browsers That Don't Support The HTML5 Tag Option

Google Fonts Url Break HTML5 Validation on W3.Org

How to Insert Raw HTML in Pug File (Not Include External HTML File)

R Shiny Selectedinput Inside Renderdatatable Cells

How Position Absolute and Fixed Block Elements Get Their Dimension

How to Change One Word Color of Placeholder

Vertical Alignment of Text in a Table Cell

CSS Align Images and Text on Same Line

Angular Performance: Dom Event Causes Unnecessary Function Calls

Is The Copyright Meta Tag Valid in HTML5

Giving The Script Tag an Id

Can You Do This HTML Layout Without Using Tables


Leave a reply



Submit