使用flex将项目对齐到底部 [英] Aligning items to the bottom using flex

问题描述

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

#login {border：1px solid red; height：50px; display：flex;}。 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 ='> $ c>

解决方案

在您的表单上：

  form {
 display：flex; 
 align-items：flex-end; 
保证金：0; 
身高：100％; 
 
 
 
 $ b $由于只有flex容器的子元素成为flex项目，使你想要对齐flex容器的元素的父。
 
 
 
在你的代码中， #login 是flex容器，使得 form 是唯一的flex项目。你需要flex属性来进一步应用一个级别，所以使 form 也是一个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>



解决方案
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.

                        
这篇关于使用flex将项目对齐到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！