Матвей Земсков

Заметки веб-мастера

Суббота, 19 марта 2016 12:45

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

Оцените материал
(1 Голосовать)

Создание привлекательной адаптивной «шапки» страницы зачастую довольно сложный процесс. До недавнего времени вам приходилось использовать обтекание (CSS-правило float) или другие трюки, чтобы правильно расположить составляющие элементы какого-либо блока страницы. К счастью, это уже в прошлом!

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

Адаптивная «шапка» на основе 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)

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

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

Прочитано 1632 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: