Не работает align-self: flex-start

Рейтинг: 0Ответов: 1Опубликовано: 29.01.2023

Мне нужно, чтобы последний flex-блок выровнялся по верху. Вот что у меня есть на данный момент (нужно, чтобы последний элемент не центрировался по вертикали)

введите сюда описание изображения

.footer {
     background: #f1eadc;
     padding: 101px 0;
}
 .footer-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .footer-contact {
     align-self: flex-start;
}
 .footer-contact p {
     font-weight: 400;
     font-size: 15px;
     letter-spacing: 0.02em;
}
 .footer-contact p.phone {
     margin-bottom: 9px;
}
 
<footer class="footer">
  <div class="container">
    <div class="footer-top">
      <a href="./" class="footer-logo">
        <img src="img/logo.svg" alt="Womazing">
      </a>
      <ul class="header-menu footer-menu">
        <li class="item"><a href="" class="link active">Главная</a></li>
        <li class="item"><a href="" class="link">Магазин</a></li>
        <li class="item"><a href="" class="link">О бренде</a></li>
        <li class="item"><a href="" class="link">Контакты</a></li>
      </ul>
      <div class="footer-contact">
        <p class="phone">+7 (495) 823-54-12</p>
        <p class="email">hello@womazing.com</p>
      </div>
    </div>
  </div>
</footer>

css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Он и не центрируется, всё работает. Думаю, так будет нагляднее:

.footer {
  background: #f1eadc;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-contact {
  align-self: flex-start;
}

.footer-contact p {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.footer-contact p.phone {
  margin-bottom: 9px;
}

.footer-menu,
.footer-logo {
  padding: 101px 0;
}
<footer class="footer">
  <div class="container">
    <div class="footer-top">
      <a href="./" class="footer-logo">
        <img src="img/logo.svg" alt="Womazing">
      </a>
      <ul class="header-menu footer-menu">
        <li class="item"><a href="" class="link active">Главная</a></li>
        <li class="item"><a href="" class="link">Магазин</a></li>
        <li class="item"><a href="" class="link">О бренде</a></li>
        <li class="item"><a href="" class="link">Контакты</a></li>
      </ul>
      <div class="footer-contact">
        <p class="phone">+7 (495) 823-54-12</p>
        <p class="email">hello@womazing.com</p>
      </div>
    </div>
  </div>
</footer>