serii81
@serii81
Я люблю phр...

Как растянуть флекс-элементы на всю высоту?

Есть менюшка
ul.nav-menu
		li.nav-menu__item.nav-menu__item--catalog
			a.nav-menu__link(href="#") Каталог товаров
		li.nav-menu__item.nav-menu__item--order
			a.nav-menu__link(href="#") Вязание на заказ
		li.nav-menu__item.logo
			a.nav-menu__link(href="#")
				img(src="assets/i/logo.svg", alt="logo" width="154" height="74")
		li.nav-menu__item.search.nav-menu__item--search
			a.nav-menu__link(href="#")
				svg.search__icon
					use(xlink:href="#search")
		li.nav-menu__item.basket.nav-menu__item--basket
			a.nav-menu__link(href="#")
				svg.basket__icon
					use(xlink:href="#basket")
				span.basket__text Корзина: пока пуста


.nav-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-menu__item {
	display: block;
	height: 100%;
	border: 1px solid green;
}


Выглядит так
5c92424774502526159706.png

Нужно, чтобы элементы растянулись на всю высоту как на макете
5c9242888f832915210741.png

Вроде бы задача несложная, но я не догоняю как это сделать.
Видать, когда задаешь контейнеру display flex, то размеры элементов сужаются до содержимого. А как высоту на весь контейнер задать?

Заранее благодарен.
  • Вопрос задан
  • 1569 просмотров
Решения вопроса 1
@thunder_thurth
начинающий верстальщик
Для одинаковой высоты элементов в строке установить align-items, align-content: stretch
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
22 окт. 2020, в 21:34
6200 руб./за проект
22 окт. 2020, в 21:22
500 руб./за проект
22 окт. 2020, в 21:06
500 руб./за проект