Создание красивых, отзывчивых заголовков всегда сложный процесс. Раньше вам нужно было использовать всплывающие окна или другие сложные трюки, и даже приходилось вручную настраивать значения пикселей для разных расширений экрана браузера. Но больше нет!
Техника, которую я собираюсь вам показать, основывается на мощном режиме макета flexbox, которая делает всю грязную работу за вас. Она использует всего несколько свойств CSS и с их помощью создается шапка, которая правильно выровнена и хорошо выглядит на всех размерах экрана, делая код более чистым и менее костыльным.
Разберем наш метод
В нашем наглядном примере создана шапка, разделенная на три секции с типичным содержимым заголовка, в которую входит:
- Слева - логотип компании;
- В центре - различные гиперссылки;
- Справа – кнопка.
Ниже вы можете ознакомиться с упрощенной версией кода.
Первое - HTML, где мы группируем разделы в отдельные теги div. Это облегчает применение правил CSS и, в целом, создается более адаптивная версия кода.
<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, который всего за пару строк выполняет всю работу по поиску нужных установок для каждого из разделов.
header{
display: flex;
justify-content: space-between;
align-items: center;
}
Полная адаптивность
«Фишка» space-between всегда позаботиться о выравнивании, даже при изменении размера экрана. Однако если область просмотра становится слишком маленькой для горизонтального заголовка, ее можно сделать вертикальной, изменив свойство flex-direction в медиа запросе.
@media (max-width: 1000px){
header{
flex-direction: column;
align-items: flex-start;
}
}
Вывод
Подведем итог нашего краткого урока! Я надеюсь, что он был полезен и вы им воспользуетесь. Flexbox в настоящее время имеет довольно хорошую совместимость с браузером, поэтому если ваша пользовательская база IE не является достаточно мощной, то этот метод может быть использован, не причиняя никаких неудобств для других пользователей.
Чтобы узнать больше о flexbox и свойствах CSS, которые мы использовали, ознакомьтесь с этими ссылками:
1. Краткое руководство по flexbox;
2. Объяснение содержания;
3. Выравнивание элементов;
4. Flex направление.