placing an element or a box on the bottom of window using flex

Question

Using flexbox, how can I move the .bottom div to the bottom of the window? The flex-direction of the .boxContainer is column so that everything can be moved vertically. I tried align-self: flex-end and align-self: baseline but both just pushed the box horizontally, not vertically. I hope someone could help me fix this.

.boxContainer {
 width: 100vw;
 height: 100vh;
 background: peachpuff;

 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.center {
 width: 300px;
 height: 150px;
 background: honeydew;
}

.bottom {
 width: 300px;
 height: 50px;
 background: cyan;
 align-self: flex-end;
}

<div class="boxContainer">
 <div class="center"></div>
 <div class="bottom"></div>
</div>

`align-items`, `align-self` and `align-content` work along the *cross axis*. `justify-content` works along the *main axis*. When you're in `flex-direction: column`, the cross axis is horizontal and the main axis is vertical. That's why `align-self` is moving your item left/right. Use `justify-content` or `auto` margins instead. See duplicate for details. — Michael Benjamin, Nov 27 '16 at 12:21

Sreekanth · Answer 1 · 2016-11-27T06:51:41.437

1

You could change the justify-content to space-between and it should do the trick for you.

In case, you dont need the center div to be pushed up, You could set the margin-top auto to both center and bottom divs.

.boxContainer {
  width: 100vw;
  height: 100vh;
  background: peachpuff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.center {
  width: 300px;
  height: 150px;
  background: honeydew;
  margin-top: auto;
}
.bottom {
  width: 300px;
  height: 50px;
  background: cyan;
  margin-top: auto;
}

<div class="boxContainer">
  <div class="center"></div>
  <div class="bottom"></div>
</div>

edited Nov 27 '16 at 06:51

answered Nov 27 '16 at 06:12

Sreekanth

3,110
10
22

the `.center` div is being pushed to the very top – jst16 Nov 27 '16 at 06:43
Updated the snippet to not push the center div up. – Sreekanth Nov 27 '16 at 06:52
Thanks for your help – jst16 Nov 27 '16 at 11:01

pradeep1991singh · Answer 2 · 2016-11-27T07:28:28.817

0

Try replacing align-self: flex-end; with align-content: flex-end; add margin-top: auto on .bottom class.

.boxContainer {
 width: 100vw;
 height: 100vh;
 background: peachpuff;

 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.center {
 width: 300px;
 height: 150px;
 background: honeydew;
}

.bottom {
 width: 300px;
 height: 50px;
 background: cyan;
 align-content: flex-end;
    margin-top: auto;
}

<div class="boxContainer">
 <div class="center"></div>
 <div class="bottom"></div>
</div>

edited Nov 27 '16 at 07:28

answered Nov 27 '16 at 06:13

pradeep1991singh

8,185
4
21
31

it just sticked to the `.center` div – jst16 Nov 27 '16 at 06:41
Thanks for your help – jst16 Nov 27 '16 at 11:01

placing an element or a box on the bottom of window using flex

2 Answers2