Align bottom not works in flex box

Question

I am trying to align the footer at the bottom, leave the space at the top. but not works. any one help me to know the correct way?

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  flex: 1;
  align-items:bottom;
}
.footer{
 background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

Possible duplicate of [Align an element to bottom with flexbox](https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox) — mypsi, Aug 30 '18 at 06:08

score 1 · Answer 1 · answered Aug 30 '18 at 05:53

1

In this example your .child also needs to have display: flex and .footer needs align-items: bottom.

Why? This is actually multiple nested flex layouts.

answered Aug 30 '18 at 05:53

We Are All Monica

13,000
8
46
72

score 1 · Accepted Answer · answered Aug 30 '18 at 05:57

First of all, to align items to the bottom the correct way is align-items: flex-end; I also declared display:flex; on .child, and gave it a width.

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  display: flex;
  width: 33.333%;
  align-items: flex-end;
}
.footer{
  background:#808080;
  width: 100%;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

score 0 · Answer 3 · answered Aug 30 '18 at 05:58

As per the code you have provided. This can be a possible solution.

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  flex: 1;
  display: inline-flex;
  align-items: flex-end;
  flex-direction: row;
}
.footer {
  display: inline-block;
  width: 100%;
 background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

But in a more optimized way. Let me show you another sample:

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  flex: 1;
  border: 1px solid green;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
.footer{
 background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

If you don't want to change the HTML tags and use the same as in the question, you can go with the first solution. Otherwise, the second one will serve better.

score 0 · Answer 4 · answered Aug 30 '18 at 06:04

Remove line-height from the .child and add height for the .parent.

Updated :

.parent {
  border: 1px solid red;
  display: flex;
  align-items: flex-end;
  height: 100px;
}

.child {
  border: 1px solid green;
  flex: 1;
  align-items:bottom;
}
.footer{
 background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

Align bottom not works in flex box

4 Answers4