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

Создание красивой, адаптивной шапки, всегда было сложным процессом. До сих пор вам необходимо было использовать свойства float, либо другие сложные приемы, иногда даже приходится подбирать значения пикселей вручную.

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

В нашем примере мы создадим адаптивную шапку, которая разделена на три секции с простым содержанием:

  • Левая секция - Логотип компании.
  • Средняя секция - Вариативные ссылки.
  • Правая секция - Кнопка.

В HTML коде мы группируем секции в отдельные div элементы. Это сделает его более простым для CSS правил.

Всего лишь пара строк 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>
header{
    display: flex; 
    
    justify-content: space-between;

    align-items: center;
}

Полная адаптивность

Свойство justify-content: space-between позаботится о выравнивании, даже при изменении размера окна. Если адапативная шапка будет слишком велика для размеров окна, мы сделаем её вертикальной, изменив свойство flex-direction в медиа запросах.

@media (max-width: 1000px){
    header{
        flex-direction: column;
        
        align-items: flex-start;
    }
}

Перевод статьи Quick Tip: The Easiest Way To Make Responsive Headers

Тэги: flexbox

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.