Flex column - align div vertically to middle and another div vertically to bottom

Question

How to align a div vertically to middle and another div vertically to bottom inside a flex column?

Expected result:

Your div has a specific height? – alessandrio Aug 03 '17 at 14:15 — alessandrio, Aug 03 '17 at 14:15
@avrilalejandro the flex column has a specific height – Rob Aug 03 '17 at 14:17 — Rob, Aug 03 '17 at 14:17

score 7 · Accepted Answer · answered Aug 03 '17 at 14:27

.container {
  border: 1px solid black;
  height: 200px;
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.first-item {
  margin-top: auto;
  margin-bottom: auto;
}

<div class="container">
  <div class="first-item">First</div>
  <div class="second-item">Second</div>
</div>

That should do it. Then the second item should be pushed to the bottom while the first item stays in the middle. A pure flexbox solution not using absolute positioning.

Awesome. Been looking all day for this. Worked 100% – Marcus Christiansen Aug 03 '17 at 14:32 — Marcus Christiansen, Aug 03 '17 at 14:32

score 0 · Answer 2 · answered Aug 03 '17 at 14:25

0

You have to use the line-height property with the same height value

.parent{
  display: table;
  position: relative;
  border: 1px solid;

  height: 150px;
  line-height: 150px;
}
.parent div{
  position: absolute;
  bottom: 0;
  line-height: 20px;
}

<div class="parent">
  test
  <div>test</div>
</div>

answered Aug 03 '17 at 14:25

alessandrio

4,282
2
29
40

I want to use flexbox, you can't use line-height in multi-line text... – Rob Aug 03 '17 at 14:30
@Rob Please add code in your question – alessandrio Aug 03 '17 at 14:32

score -1 · Answer 3 · answered Aug 03 '17 at 14:24

-1

Take a look at this.

.parent{
  display: flex;
    height: 150px;
    width: 50px;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
}

.two{
    align-self: flex-end;
    position: absolute;
}

<div class="parent">
   <div>test</div>
   <div class="two">test</div>
</div>

answered Aug 03 '17 at 14:24

Saravanan I

1,229
6
9

It doesn't work. – Rob Aug 03 '17 at 14:28
can you explain more? – Saravanan I Aug 03 '17 at 14:29
It should be equal to https://i.stack.imgur.com/y5XIb.png – Rob Aug 03 '17 at 14:31
you mean the width is more? – Saravanan I Aug 03 '17 at 14:33

Flex column - align div vertically to middle and another div vertically to bottom

3 Answers3