Простой способ создания адаптивной «шапки»

Подход, описанный в этой заметке, основан на FlexBox – современном и мощном способе верстки макетов, который делает всю «грязную» работу за вас. В процессе верстки «шапки» мы будем использовать несколько полезных CSS-правил, с помощью которых должным образом расположим и выровняем элементы «шапки». Благодаря использованию FlexBox, наша страница будет замечательно выглядеть на экранах всех размеров, а ее код будет «чистым» и валидным.

На демо-странице, вы можете видеть «шапку», которая состоит из 3 типичных секций:

• Слева – логотип компании
• Посередине – меню
• Справа – кнопка

Ниже приведен код, описывающий основные моменты. Структура HTML-кода «шапки» включает в себя 3 блока div. Это сделано для того, чтобы можно было проще применять к ним CSS-правила и код выглядел более упорядоченным.

HTML

<header>
	<div class="header-left">CoolLogo</div>
	<div class="header-center">
		<ul>
			<li><a href="#">Our products</a></li>
			<li><a href="#">Pricing</a></li>
			<li><a href="#">Blog</a></li>
		</ul>
	</div>
	<div class="header-right"><button>Buy now</button></div>
</header>

CSS-код, выполняющий всю основную работу, состоит всего лишь из нескольких строк. Он служит для расположения элементов «шапки» в нужных местах.

CSS

header{
	/* «включаем» FlexBox режим */
	display: flex; 
	
	/* Размещаем элементы внутри шапки */
	justify-content: space-between;

	/* Выравниваем элементы вертикально посередине*/
	align-items: center;
}

Добавляем адаптивность

Использование свойства justify-content со значением space-between, всегда выравнивает элементы, особенно при изменении размеров экрана. Однако, когда размер окна становится совсем маленьким чтобы отображать элементы «шапки» горизонтально, мы выстраиваем их вертикально. В этом нам помогает совместное использование свойства flex-direction и медиа-запросов (media queries).

CSS

@media (max-width: 1000px){
	header{
		/* Изменяем направление оси в шапке на вертикальное */
		flex-direction: column;
		
		/* Выравниваем элементы в «шапке» влево */
		align-items: flex-start;
	}
}

Подводим итог этой небольшой заметки. Надеемся, информация в ней полезна для вас, и вы будете применять описанный способ в своей работе. FlexBox свойства отлично поддерживаются всеми современными браузерами. Поэтому очень желательно применять его, если, конечно, большинство ваших посетителей не пользуются устаревшими версиями IE.

Чтобы узнать больше о CSS FlexBox ознакомьтесь со следующими статьями:

• Справочник по FlexBox свойствам (EN)
• Подробно о свойстве justify-content (EN)
• Подробно о свойстве align-items (EN)
• Подробно о свойстве flex-direction (EN)

Оригинал статьи

Демо-страница