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?

Accepted Answer

I've made a posible solution.

.flex-center {
  background-color: #739FD0;
  color: #000000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: 400px;
}
.flex-center-bottom {
  background-color: #739FD0;
  color: #000000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
}
.flex-item-center {
  border: solid 2px #4675AA;
  order: 0;
  flex: 0 1 auto;
  align-self: center;
}
.flex-item-bottom {
  border: solid 2px #4675AA;
  order: 1;
  flex: 0 1 auto;
  align-self: flex-end;
}

<div class="flex-center">
  <div class="flex-item-center">
    <p>DROP FILES HERE</p>
  </div>
</div>
<div class="flex-center-bottom">
  <div class="flex-item-center">
    <p>Hint: You can also drop files in the all files page</p>
  </div>
</div>

Update 2017: Tested in Google Chrome Versión 62.0.3202.89 (Build oficial) (32 bits).

.flex-center,
.flex-center-bottom {
  align-items: center;
  background-color: #739FD0;
  color: #000000;
  display: flex;
}

.flex-center {
  height: 400px;
  justify-content: center;
}

.flex-center-bottom {
  justify-content: flex-end;
}

.flex-item-center {
  border: solid 2px #4675AA;
  font-family: Arial, sans-serif;
  font-size: 1.6em;
  line-height: 1px;
  padding: 0 3px;
}

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

I hope this helps you.

Answer 2

Is this what you are looking for?

body {
  background-color: lightblue;
}

#main {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: -webkit-flex;
  /* Safari */
  -webkit-align-items: flex-start;
  /* Safari 7.0+ */
  display: flex;
  align-items: flex-start;
}

#main div {
  -webkit-flex: 1;
  /* Safari 6.1+ */
  flex: 1;
}

.flex-item-center {
  margin-left: 40%;
  border-style: solid;
  -webkit-align-self: center;
  /* Safari 7.0+ */
  align-self: center;
}

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

Answer 3

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

Answer 4

In Bootstrap 4.x you can use the utility classes

<link href="" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="d-flex justify-content-center h-100">
        <div class="d-flex align-items-center">center center</div>
      </div>
      <div class="d-flex justify-content-end h-100">
        <div class="d-flex align-items-end">right bottom</div>
      </div>
    </div>
  </div>
</div>

EDIT

Since I received a couple downvotes I believe a review is in order.
To me the above answer is still valid, however I understand it's not clear it requires some height.

How this height is achieved doesn't really matter. Either you set it fixed in CSS on a wrapper or for the code snippet's sake we set the document's height to make it responsive.

If the "center content" takes up the space in height, the "bottom content" can be positioned absolute, so it doesn't add height. All what's left is to make sure it covers the full width and positions from the bottom.

html, body { height: 100%; } /* can be anything that generates height */

<link href="" rel="stylesheet" />

<div class="d-flex justify-content-center h-100">
    <div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end position-absolute w-100 fixed-bottom">
    <div class="d-flex align-items-end">right bottom</div>
</div>

So functionality wise, there's no additional CSS required in Bootstrap.

Documentation justify content
Documentation position

Flexbox Center and Bottom Right Item

4 Answers

Must Read

Your Answer

Elena Rostova

Flexbox Center and Bottom Right Item

4 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Elena Rostova