Flexbox center and bottom right item

Question

I'm trying to achieve the following result using flexbox:

I tried the with the following html but I can't get it to work.

<div class=" flex-center">
    <div class="flex-item-center">
        <p>
            Some text in box A
        </p>
    </div>
    <div class="flex-item-bottom">
        <p>Some text in box B....</p>
    </div>
</div>

CSS:

.flex-center {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.flex-item-center {
  align-self: center;
}

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

How can I make it look like the image?

Answer 1

Try:

#main-wrapper {
  background: blue;
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
}

.x-center {
  display: flex;
  justify-content: center;
}

.y-center {
  flex: 1;
}

.x-right {
  justify-content: flex-end;
}

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

.small-div {
  padding: 10px;
}

<div id="main-wrapper">
  <div class="x-center y-center small-div">Center center</div>
  <div class="x-right y-bottom small-div">Bottom Right</div>
</div>

Notes:

The align-self won't work for IE10 or below. Anybody know how to make the center div a bit more to the left without position relativing it? Thanks