使用 flex 将项目对齐到底部

Question

我正在尝试使用 flex 将父项中的项目与父项的底部对齐，但由于某种原因它不起作用。我做错了什么？

#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>

Answer 1

您需要对齐父项中的项目。

* {
  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>

Answer 2

form 应该是 flex 容器，margin 可用于完成定位并避免拉伸。

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>

Answer 3

在您的表单上：

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

因为只有弹性容器的 子元素 成为弹性项目，所以将您希望对齐弹性容器的元素的父元素设为弹性容器。

在您的代码中，#login 是弹性容器，使 form 成为唯一的弹性项目。您需要 flex 属性才能更深入地应用一个级别，因此也将 form 设为 flex 容器。

使用 flex 将项目对齐到底部

Aligning items to the bottom using flex

html

css

vertical-alignment

flexbox