Элемент Flexbox не собирается на дно контейнера?

Question

Как вы скажете из этого вопроса, я все еще новичок в Flexbox, а также в SASS. У меня есть приложение MVC, где я пытаюсь выровнять информацию для входа в систему в зависимости от того, аутентифицированы они или нет.

Что я пытаюсь сделать, так это чтобы мой заголовок с логотипом слева и некоторыми кнопками входа в систему / регистрации располагался внизу в одной строке, если вы не прошли проверку подлинности или их имя пользователя и информация о выходе из системы / учетной записи размещены в стеке. друг на друга, если они аутентифицированы.

Я пытаюсь использовать flexbox для достижения этой цели. Идея заключается в том, что у меня будет общий родительский контейнер "header_account-info", логотип в дочернем контейнере "header__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;
    }
}

Answer 1

Почему бы мне не увидеть цвет фона в моем контейнере header-account-login, и я подумал, что у меня были правильные настройки, чтобы кнопки доходили до конца (внизу) контейнера?

Поскольку у вас есть опечатки в вашем HTML / CSS - в некоторых случаях вы используете одно подчеркивание, а в других два. Также в некоторых местах «учетная запись» написана неправильно.

Что касается лаута, думаю, этого будет достаточно:

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

Answer 2

Вот один из способов заставить его работать:

.header-account-info {
    position: relative;
}
.header-account-login {
    background-color: red;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 158px;
}

То, как вы пытаетесь назвать свой класс (т. Е. "& __ acount-login"), неверно - просто дайте себе полное имя класса, как в моем примере.