Pin a button to the bottom corner of a container

Question

I am using flexbox to center a form vertically and horizontally. Inside this form I'd like to pin a button to the bottom right of the flexbox container. I am not sure how to get the button pinned to the bottom right though.

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

form {
  border: 1px solid gray;
  padding: 1em;
}

.form-button {
  margin-top: 1em;
  align-self: flex-end;
}

<div class="container">
  <form>
    <div class="form-input">
      <label> Name <input type="text" /></label>
    </div>
    <div class="form-button">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

Michael Benjamin · Accepted Answer · 2017-08-10T11:41:25.743

You just need to make the form element a flex container, because flex properties only work between parent and child elements.

In other words, your align-self: flex-end on the .form-button is not working because the parent – form – does not have display: flex or display: inline-flex applied.

Here's a more complete explanation:

Proper use of flex properties when nesting flex containers

html, body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

form {
  border: 1px solid gray;
  padding: 1em;

  /* NEW */
  display: flex;
  flex-direction: column;
}

.form-button {
  margin-top: 1em;
  align-self: flex-end;
}

<div class="container">
  <form>
    <div class="form-input">
      <label> Name <input type="text" /></label>
    </div>
    <div class="form-button">
      <button type="submit">Submit</button>
   </div>
  </form>
</div>

I see! I needed to make the form a flex container as well. Thanks! — Mdd, Aug 10 '17 at 02:01

score 1 · Answer 2 · answered Aug 10 '17 at 02:02

1

.form-button {
  margin-top: 1em;
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
}

answered Aug 10 '17 at 02:02

kyun

9,710
9
31
66

score 0 · Answer 3 · answered Aug 10 '17 at 02:17

Just insert float: right;

like this:

.form-button {
  float: right;<-----------added
  //more code...
}

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

form {
  border: 1px solid gray;
  padding: 1em;
}

.form-button {
  margin-top: 1em;
  float: right;
}

<div class="container">
  <form>
    <div class="form-input">
      <label> Name <input type="text" /></label>
    </div>
    <div class="form-button">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

Pin a button to the bottom corner of a container

3 Answers3

Linked