@rxxxxxx

Как сделать, чтобы не растягивался на всю высоту родителя?

Здравствуйте.
Есть вот такая структура:
<header class="header">
                <div class="logo">Thrivetalk</div>
                <div class="menu">
                    <a class="menu__item" href="#">Home</a>
                    <a class="menu__item" href="#">About</a>
                    <a class="menu__item" href="#">Services</a>
                    <a class="menu__item" href="#">Blog</a>
                </div>
                <a class="menu__contact_button" href="#">contact us</a>
</header>

Я их выровнял флексами в ряд:
6138b42fe5c90857646231.png
Из-за того, что кнопка "contact us" высокая, весь header растягивается до нижнего края этой кнопки (как я понял):
6138b49f97f69848227753.png
Проблема в том, что все дочерние элементы header'а наследуют его высоту. То есть, вместе с хедером растягиваются и
его дочерние блоки, а в блоках ссылки:
6138b5328a7cf816339121.png
Из-за этого при добавлении псевдокласса :hover на ссылку, он срабатывает, когда курсор ниже него.
Мне нужно, чтобы height ссылок был именно столько, сколько они на самом деле занимают.
Простите, если что-то неправильно объяснил
Спасибо
  • Вопрос задан
  • 1053 просмотра
Решения вопроса 1
@wakenbyWork
По дефолту display:flex; растягивает содержимое, нужно указать align-items: center | flex-start и так далее

Но было бы хорошо получить код в jsfiddle или в codePen

.class {
  align-items: flex-start;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы