CODEWITHSUNDEEP
htmlcssflexbox
3gwebtrain
3gwebtrain

Reputation: 15307

Align bottom not works in flex box

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>

Upvotes: 0

Views: 71

Answers (4)

George
George

Reputation: 205

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>

Upvotes: 0

Abin Thaha
Abin Thaha

Reputation: 4633

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.

Upvotes: 0

Scopestyle
Scopestyle

Reputation: 665

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>

Upvotes: 1

We Are All Monica
We Are All Monica

Reputation: 13344

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.

Upvotes: 1

Related Questions