Pin element (flex item) to bottom of container

Question

I have a container to be the full window height/width. Inside this container I want a form that's vertically & horizontally centered. Below, I also want a piece of copy on the bottom baseline of the container. Similar to the shitty illustration below. Right now I am only able to have them both centered vertically and can't find a nice way to make the bottom copy pin itself to the bottom of the container.

---------
|       |
|       |
|<form> |
|       |
|<copy> |
---------

.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  padding: 1em;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

form {
  
}

.bot {
  align-self: flex-end;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
   </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

chazsolo · Accepted Answer · 2017-11-17T13:49:56.587

Updated Answer

With auto margins you can group or pack flex items together without extra markup, or shift elements around by applying a margin in the opposite direction (as seen in my original answer). In this case, simply set margin: auto on the form; this will inform the flex container to center the form within all available space remaining:

.flex-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 150px;
  width: 400px;
  background: #e7e7e7;
}
 
form {
  margin: auto;
}

p {
  margin: 0;
}

<div class="flex-container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">
    Lorem ipsum dolor sit amet
  </p>
</div>

See the other answers here for more insight:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Can't scroll to top of flex item that is overflowing container

Original Answer

A clever way to "pin" a flex child is to give it an auto margin in the direction opposite of where you want it to go. In your case, you'd want to set

p.bot {
    margin-top: auto;
}

and the paragraph will shift to the bottom of the parent flex container. It works pretty well with simple layouts such as this...

html,
body {
  margin: 0;
  padding: 0;
}
.container {
  background-color: #eee;
  height: 100vh;
  width: 100vw;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
form {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bot {
  margin-top: auto;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

Edit Note, I've also made the form a nested flexbox within the .container and set it's height to 100%, which is basically doing the same thing. Michael_B has a good explanation in the comments.

It doesn't really work. If you apply `margin-top: auto` to `.bot`, it does indeed send the paragraph to the bottom. BUT it also sends the form all the way to the top. What you've done is make the `form` a nested flexbox with `height: 100%`. It's this flexbox that's also keeping the paragraph down at the bottom. In your snippet, remove the `margin-top: auto`. You'll see the paragraph stays at the bottom. Not that the nested flexbox isn't a good solution ;-) — Michael Benjamin, Oct 14 '15 at 01:45
@Michael_B Hmm, you're right - thanks for pointing it out! Guess I've more studying to do :) — chazsolo, Oct 14 '15 at 01:48
Margin auto and flexbox should not be mixed like this. Readers: Keep going for the correct answer below. — Shammoo, Sep 12 '17 at 21:16

score 8 · Answer 2 · answered Oct 14 '15 at 00:57

8

You can create a pseudo element by using :before on the container, to make it as three sections, and use justify-content: space-between;

* {
    margin: 0;
}
.container {
    background-color: #eee;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
}
.container:before {
    content: '';
}

<div class="container">
    <form><input type="text" /> <button type="submit">submit</button></form>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

jsfiddle

answered Oct 14 '15 at 00:57

Stickers

75,527
23
147
186

The only issue with this solution is that the pseudo-element and the footer (`.bot`) would need to always be equal height. Otherwise, the form would not be vertically centered in the container. – Michael Benjamin Jan 27 '16 at 14:35
1

In fact after another reading of the question, none of the existing answers are correct, note OP wants the
vertically centered in the entire page.
– Stickers Jan 27 '16 at 14:43
Correct. But I believe my demo meets that requirement. – Michael Benjamin Jan 27 '16 at 14:49
Oh, just saw that, yes the position approach. Only problem would be the overlapping on small viewport height. – Stickers Jan 27 '16 at 14:52
Agreed. But that can be handled with a media query. – Michael Benjamin Jan 27 '16 at 14:55
Probably you can, if the footer is sort of known height, anyway let's not to worry about it :) – Stickers Jan 27 '16 at 14:56
1

Your solution is good. It simply requires equal heights on the edge items for the middle item to be perfectly centered. Just wanted to point that out. – Michael Benjamin Jan 27 '16 at 15:03

score 5 · Answer 3 · edited May 23 '17 at 11:46

Here's the problem you're having:

You have set the flex-direction to column. That means you've shifted the main axis to vertical, and the cross axis to horizontal.

The align-* properties work along the cross axis. So when you're telling .bot to align-self: flex-end, you're actually telling it to shift right, not down.

But it will not shift right in this case because the item is occupying the full width of the container and, therefore, has no space to move. However, if you limit it's width... http://jsfiddle.net/t7hap87o/

In wanting to pin <copy> to the bottom of the screen, flexbox has a bit of a limitation: There is no property similar to align-self for the main axis.

There are several other options to get the job done. You can nest flexboxes in the current container, or remove .bot from this container and place it in another.

Flexbox also allows for absolutely-positioned flex children. Try this:

.container {
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
}

.bot {
    position: absolute;
    bottom: 0;
}

DEMO

Note: A margin-top: auto on .bot won't work in the current HTML structure. It would, in fact, pin the target element to the bottom. But it would also shove the centered element all the way to the top.

misterManSam · Answer 4 · 2015-10-14T01:11:22.090

The align-self: flex-end; doesn't have the desired affect, because the flex children are lined up as columns.

One easy way to line this up as desired, without adding any extra markup, is to:

move the footer element out of the .container

<div class="container"></div>
<p class="bot"></p>

give the body (or another wrapper, if required) display: flex so that the .container and footer are flex children (siblings).
give .container a flex property of flex: 1 1 100%;. This will cause it to grow and shrink from its initial value of 100%. The footer is pushed down, but its height is accommodated for when the container shrinks.
give the footer a flex property of flex: 1 1 auto. This will now be pushed down the bottom, but will increase height with more contents.

Read more about the flex property over on the MDN.

Example

* {
  margin: 0;
  padding: 0;

}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.container {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #EEE;
}
.bot {
  flex: 1 1 auto;
  text-align: center;
  background: #EEE;
  padding: 1em;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
</div>
<p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>

score 1 · Answer 5 · answered Oct 14 '15 at 00:56

Change the flex-direction back to column, set one of the containers to width: 100% and use flex-wrap: wrap to achieve this.

Something like this (and it will work in Firefox and IE 10+ with vendor prefixes):

.container {
  background-color: #333;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}

.footer {
  width: 100px;
  height: 20px;
  margin-top: -20px; /* set the margin top to negative what the 
                        height is so the form is perfectly centered */
  background-color: #900;
  color: #fff;
  text-align: center;
}

.form-wrapper {
  width: 100%; /* needs to be 100% to force the items to wrap */
  height: 50px;
  background-color: #009;
  
  /* center the form inside the wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="form-wrapper">
    <form>
      <input type="text">
      <button type="submit">submit</button>
    </form>
  </div>
  <div class="footer">footer content</div>
</div>

Pin element (flex item) to bottom of container

5 Answers5

Updated Answer

Original Answer

Example

Linked

Related