Flex Center Content but Align to Top

Question

I'm currently using Flexbox to layout my website and I'm trying to achieve a specific design.

The design I'm trying to achieve is shown below - where the overall content is centered in the middle of the page but the content on the left is align to the top of the right content. The height of the body is also 100vh.

Please include the code you've tried. http://stackoverflow.com/help/how-to-ask — Michael Benjamin, Feb 01 '16 at 12:38
[**How to disable equal height columns in Flexbox**](http://stackoverflow.com/a/33043084/3597276) — Michael Benjamin, Feb 02 '16 at 04:12

score 1 · Answer 1 · answered Feb 01 '16 at 12:30

You want to use align-items and align-self to get this to work: http://codepen.io/anon/pen/qbyBOd

Code dump:

<div class="container">
  <div>1</div>
  <div>2</div>
</div>

.container {
  display: flex;
  width: 200px;
  height: 100px;
  align-items: flex-start;
}

.container div {
  flex: 1;
  border: 2px solid red;
  background: gray;
}

.container div:nth-child(2) {
  flex: 1;
  align-self: stretch;
}

score 0 · Answer 2 · answered Feb 01 '16 at 12:31

align-self is a good shout

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  justify-content: center;
}
.child1 {
  background-color: #e67e22;
  align-self: flex-start;
}
.child2 {
  background-color: #3498db;
  align-self: stretch;
}

<div class="container">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, voluptatibus.</div>
  <div class="child2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, vel!</div>
</div>

Flex Center Content but Align to Top

2 Answers2