html - 使用 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

在您的表格上:

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

由于只有 Flex 容器的子元素会成为 Flex 元素，因此请将要对齐 Flex 容器的元素设为父元素。

在您的代码中，#login 是 Fl​​ex 容器，使 form 成为唯一的 Flex 元素。您需要 Flex 属性才能更深一层应用，因此也将 form 设为 Flex 容器。