CODEWITHSUNDEEP
htmlcssflexbox
Ravi
Ravi

Reputation: 67

Flex Center Content but Align to Top

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.

enter image description here

Upvotes: 0

Views: 111

Answers (2)

Tienou
Tienou

Reputation: 720

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>

Upvotes: 0

unpollo
unpollo

Reputation: 804

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;
}

Upvotes: 1

Related Questions