时间戳

首页 > 解决方案 > Flexbox 项目不会进入容器底部？

css - Flexbox 项目不会进入容器底部？

问题描述

正如您将从这个问题中看到的那样，我对 Flexbox 和 SASS 仍然很陌生。我有一个 MVC 应用程序，我试图根据它们是否经过身份验证来对齐标头登录信息。

我想要完成的是让我的标题左侧带有徽标，如果您未通过身份验证，或者他们的用户名和注销/帐户信息堆叠在每个顶部，则一些登录/注册按钮在一行中刷新到底部其他，如果他们经过身份验证。

我正在尝试使用 flexbox 来完成这些。这个想法是我将有一个整体父容器"header_account-info"，子容器中的徽标，以及任何一个或"header__logo"中的其他登录部分。为了测试，我使用了“header-account-login”容器。"header_account-user""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;
    }
}

标签： csssassflexbox

解决方案

为什么我在“header-account-login”容器中看不到背景颜色，并且我认为我有正确的设置来使按钮转到容器的末尾（底部）？

因为您的 HTML/CSS 中有拼写错误 - 在某些情况下，您使用一个下划线，而在其他情况下，您使用两个下划线。此外，“帐户”在某些地方拼写错误。

至于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>

推荐阅读