align multiple flexbox items differently

Question

I have a div with two items in it. I put them in a column an needed the first item to justify: center and the second one to justify: flex-end. How do I do this?

HTML:

<div class="wrapper wrapper--login">
   <h1 class="wrapper--login__title">
      Demo or Die
   </h1>
   <a class="btn wrapper--login__btn" href="#">
      Log in
   </a>
</div>

css:

.wrapper--login{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

score 4 · Accepted Answer · edited May 23 '17 at 12:25

The wrapper need a height and the title margin: auto 0

Note, this will center the item in the available space left (container minus bottom element), not in the center of the container.

To center it relative to the container, check these posts:

.wrapper--login{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 200px;
}

.wrapper--login__title {
  margin: auto 0;
}

<div class="wrapper wrapper--login">
   <h1 class="wrapper--login__title">
      Demo or Die
   </h1>
   <a class="btn wrapper--login__btn" href="#">
      Log in
   </a>
</div>

align multiple flexbox items differently

1 Answers1