Aligning items to the bottom using flex

问题

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>

回答1:

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.

回答2:

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>

回答3:

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>

来源：https://stackoverflow.com/questions/35440234/aligning-items-to-the-bottom-using-flex