Use flexbox to align 2 divs: one center-center and the other bottom center

Question

I am trying to use flexbox to align two divs within their parent with one completely centered and the other bottom-center. They both share the same parent div. The result should be like this:

------------------------
|                      |
|                      |
|                      |
|                      |
|        ------        |
|        | b1 |        |
|        |    |        |
|        ------        |
|                      |
|        ------        |
|        | b2 |        |
|        ------        |
------------------------

This is what I have so far:

div {
  box-sizing: border-box;
  border: 1px black solid;
}

.text-center{
  text-align:center;
}

.flex-wrap {
  width:400px;
  height: 400px;
  background: #ddd;
  display: flex;
  align-items: flex-start; 
}

.flex-centered {
  align-self: center;
}

.flex-bottom-center {
  align-self: flex-end;
}

<div class="flex-wrap">
  <div class="flex-centered text-center">
    Here is some text for the center
  </div>
    
  <div class="flex-bottom-center text-center">
    Here is some text for the bottom center
  </div>
</div>

It seems almost there but the first box is left aligned whilst the bottom is right aligned.

Can anyone help?

Edit: this is not the same as the question cited in marking mine as duplicate: that question is asking how to make the bottom div equidistant to the center div and the bottom. Mine is asking how to place the bottom div at the bottom of the container.

No this is not possible ***natively*** with Flexbox. I can be done by adding a dummy hidden div the same size as the footer to balance out the margins. — Paulie_D, May 05 '16 at 14:01
Essentially, it's the same as this question...different direction, same issue - http://stackoverflow.com/questions/28700805/aligning-elements-left-and-center-with-flexbox — Paulie_D, May 05 '16 at 14:04
In reference to your edit, the duplicate is valid, as with only a minor adjustment it meets the requirements of your question. I've updated [my answer](http://stackoverflow.com/a/33944865/3597276) to show exactly how it works. — Michael Benjamin, May 23 '16 at 02:56

Nenad Vracar · Answer 1 · 2016-05-05T14:07:39.153

You can change to flex-direction: column and then you can use margins to position divs

div {
  box-sizing: border-box;
  border: 1px black solid;
}
.text-center{
  text-align:center;
}

.flex-wrap {
  width:400px;
  height: 400px;
  background: #ddd;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.flex-centered, .flex-bottom-center {
  margin-top: auto;
}

<div class="flex-wrap">
  <div class="flex-centered text-center">Here is some text for the center</div>
  <div class="flex-bottom-center text-center">Here is some text for the bottom center</div>
</div>

If you want to position .flex-centered in vertical center of parent element you need to remove it from elements flow with position: absolute

div {
  box-sizing: border-box;
  border: 1px black solid;
}
.text-center {
  text-align: center;
}
.flex-wrap {
  width: 400px;
  height: 400px;
  background: #ddd;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
  align-items: center;
}
.flex-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="flex-wrap">
  <div class="flex-centered text-center">Here is some text for the center</div>
  <div class="flex-bottom-center text-center">Here is some text for the bottom center</div>
</div>

Use flexbox to align 2 divs: one center-center and the other bottom center

1 Answers1