正如您将从这个问题中看出的那样,我对 Flexbox 和 SASS 仍然是新手。我有一个 MVC 应用程序,我试图根据它们是否经过身份验证来对齐 header 登录信息。
我想要完成的是,如果您未通过身份验证或他们的用户名和注销/帐户信息堆叠在上面,则让我的标题在左侧带有 Logo ,并且一些登录/注册按钮在一行中齐平到底部如果他们通过身份验证,则在彼此之上。
我正在尝试使用 flexbox 来完成这些。我的想法是,我会有一个整体父容器 "header_account-info"
,"header__logo"
子容器中的 Logo ,以及 "中的其他登录部分header_account-user"
或 "header-account-login"
。为了进行测试,我使用了“header-account-login”容器。
使用下面的代码,我无法使 "header-account-login"
容器具有背景色(用于测试),也无法使其与底部对齐。
我将其放入 Code Pen 中,看到了相同的结果。 https://codepen.io/anon/pen/WgGxQL
为什么我在我的 "header-account-login"
容器中看不到背景颜色,我认为我有正确的设置让按钮到达容器的末端(底部) ?
HTML
<div class="header">
<div class="header__logo">
<img src="~/images/logo.png" class="header-logo" />
</div>
<div class="header_account-info">
<div class="header-account-login">
<a href="@Url.Action("Register", "Account")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="@Url.Action("Login", "Account")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
SASS
.header {
display: flex;
padding: 3px;
&__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px; /*TESTING*/
}
&__account-info {
display: flex;
background-color: aquamarine;
}
&__account-user {
background-color: blanchedalmond;
}
&__acount-login {
align-items: flex-end;
background-color: aquamarine;
}
}
最佳答案
Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
因为您的 HTML/CSS 中有拼写错误 - 在某些情况下您使用单个下划线,而在其他情况下使用两个下划线。此外,“account”在某些地方拼写错误。
至于lauot,我觉得这样就够了:
.header {
display: flex;
padding: 3px;
justify-content: space-between;
}
.header__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px;
}
.header__account-info {
display: flex;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="header__logo">
<img src="http://www.fillmurray.com/g/140/100" class="header-logo" />
</div>
<div class="header__account-info">
<div class="header__account-login">
<a href="@Url.Action(" Register ", "Account ")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="@Url.Action(" Login ", "Account ")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
关于css - Flexbox 元素不会到达容器的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52069199/