Aligning a single child to the bottom of a flex container

Question

I'm building a static page with a large intro section, that has a title, a caption, and a button. I want the title and caption to be left aligned horizontally, and center aligned vertically but the button needs to be center aligned horizontally and at the bottom of the container.

I'm using flexbox here, the parent is the flexbox with flex-direction set to column and justify-content: center. Then I gave the button a align-self: center which worked for the horizontally centered alignment. Then I gave the button a margin-top: auto, hoping it would move to the bottom of the parent, but while that happened, it also pushed the title and caption to the very top of the container, which is not what I want. See the code below.

.section__intro {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  &__button {
    align-self: center;
    margin-top: auto;
  }
}

<section class="section__intro">
  <div class="section__intro__title">
    This is
    <span class="section__intro__title--big">
      The Title of the page
    </span>
  </div>
  <a href="#" class=" section__intro__button">Join Us Now</a
      href="#">
  <button class="section__intro__scroll"></button>
</section>

I want the button at the bottom of the container with class section__intro__scroll to be at the bottom. Also, I do not want to use position: absolute for this.

Can you provide a diagram/picture of what the layout should looks like? — Francis G, Aug 14 '19 at 07:35

score 2 · Accepted Answer · answered Aug 14 '19 at 08:21

If I understand it correctly you are trying something like this using the same markup?

body {
  margin: 0;
}

.section__intro {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    &__button {
      align-self: left;
      margin-bottom: auto;
    }
    &__scroll {
      margin: 0 auto;
    }
    &__title {
      margin-top: auto;
    }
}

view in codepen

Ander · Answer 2 · 2019-08-14T08:28:07.150

As stated in the comments, is not possible to do it with your current markup (it is in fact possible, as seen in the Yor's answer), one way to achieve what you want using only flexbox is split the problem in two.

You have to group in two boxes the items: the first box for the title and the caption, the second box for the button. With these two boxes, you can set the first box to grow and it will push the second box to the bottom.

Then you can center vertically the content of the first box usign the same technique you are using now.

.section__intro {
  display: flex;
  flex-direction: column;

  /*
  Force to make it tall
  */
  height: 80vh;
}

.section__intro__title {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.section__intro__caption {
  display: block;
}

.section__intro__scroll {
  align-self: center;
  justify-self: end;
}

<section class="section__intro">
  <div class="section__intro__title">
    <span class="section__intro__title--big">
      The Title of the page
    </span>
    <a href="#" class=" section__intro__caption">Join Us Now</a>
  </div>

  <button class="section__intro__scroll">Button</button>
</section>

Aligning a single child to the bottom of a flex container

2 Answers2