Aligning items to the bottom using flex

Question

I'm trying to use flex to align the items inside the parent to the bottom of parent, but it's not working for some reason. What am I doing wrong?

#login {
border: 1px solid red;
height: 50px;
display: flex;
}
.login {
border-radius: 5px;
padding: 5px;
align-self: flex-end;
}
#loginButton {
border-radius: 5px;
padding: 7.5px;
background-color: black;
color: white;
cursor: pointer;
}

<div id = 'login'>
<form method = 'POST' action = 'login.php'>
<input class = 'login' type = 'text' name = 'username' maxlength = '20' placeholder = 'Username' size = '10'>
<input class = 'login' type = 'password' name = 'password' maxlength = '20' placeholder = 'Password' size = '10'>
<input class = 'login' id = 'loginButton' type = 'submit' value = 'Login'>
</form>
</div>

Michael Benjamin · Accepted Answer · 2016-02-17T01:47:00.537

2

On your form:

form {
    display: flex;
    align-items: flex-end;
    margin: 0;
    height: 100%;
}

Since only the child elements of a flex container become flex items, make the parent of the elements you wish to align a flex container.

In your code, #login was the flex container, making the form the only flex item. You need flex properties to apply one level deeper, so make form a flex container, as well.

edited Feb 17 '16 at 01:47

answered Feb 16 '16 at 18:41

Michael Benjamin

346,931
104
581
701

Paulie_D · Answer 2 · 2016-02-16T18:44:34.673

0

You need to align the items in the parent.

* {
  box-sizing: border-box;
}
#login {
  border: 1px solid red;
  height: 50px;
  display: flex;
  align-items: flex-end;
}
.login {
  border-radius: 5px;
  padding: 5px;
}
#loginButton {
  border-radius: 5px;
  padding: 7px;
  background-color: black;
  color: white;
  cursor: pointer;
}

<div id='login'>
  <form method='POST' action='login.php'>
    <input class='login' type='text' name='username' maxlength='20' placeholder='Username' size='10'>
    <input class='login' type='password' name='password' maxlength='20' placeholder='Password' size='10'>
    <input class='login' id='loginButton' type='submit' value='Login'>
  </form>
</div>

edited Feb 16 '16 at 18:44

answered Feb 16 '16 at 18:29

Paulie_D

107,962
13
142
161

While the login button is aligned all the way at the bottom, the username and password is aligned slightly higher...Around 3 pixels off the bottom. Why is that? – jessica Feb 16 '16 at 18:32
Also, I tried this on my website, and it's not working for some reason. https://www.iscattered.com/testx.php – jessica Feb 16 '16 at 18:35
Well the items are different sizes...and you have different padding on the button. – Paulie_D Feb 16 '16 at 18:45
And on your site the form has the buttons at the bottom but the form itself is not at the bottom of the wrapping div. – Paulie_D Feb 16 '16 at 18:46

G-Cyrillus · Answer 3 · 2016-02-16T18:42:26.597

0

form should be the flex container and margin can be used to finalize positioning and to avoid stretching.

form {
  border: 1px solid red;
  height: 50px;
  display: flex;
}
.login {
  border-radius: 5px;
  padding: 5px;
  margin: auto 1em;
}
#loginButton {
  border-radius: 5px;
  padding: 7.5px;
  background-color: black;
  color: white;
  cursor: pointer;
  margin-left: auto;
}
/* added for demo purpose to see the form in middle */

html {
  height: 100%;
  display: flex;
}
body {
  width: 80%;
  margin: auto;
}

<div id='login'>
  <form method='POST' action='login.php'>
    <input class='login' type='text' name='username' maxlength='20' placeholder='Username' size='10'>
    <input class='login' type='password' name='password' maxlength='20' placeholder='Password' size='10'>
    <input class='login' id='loginButton' type='submit' value='Login'>
  </form>
</div>

edited Feb 16 '16 at 18:42

answered Feb 16 '16 at 18:39

G-Cyrillus

101,410
14
105
129

What was the question? – jessica Feb 16 '16 at 18:41
1

@jessica trying to use flex to align form elements, but none of those form elements where child of the flex box ... then align-self seems to show you wanted something at the far right ... margins in action to show you you can skip some flex properties and just use margins If question was not clear enough or attempt of using flex was too clumsy, maybe rephrasing the question could help ? – G-Cyrillus Feb 16 '16 at 18:45

Aligning items to the bottom using flex

3 Answers3

Linked