Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Как создать отзывчивую полноэкранную страницу с помощью Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Pembelight (you can also view the original English article)

В этом уроке мы узнаем, как создать полноэкранную адаптивную страницу с помощью flexbox. Наша страница будет содержать полноэкранное фоновое изображение, вертикально центрированный контент и футер прижатый к низу.

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

Примечание: Этот урок предполагает, что вы немного разбираетесь во flexbox. Новичкам я советую пересмотреть эти учебные пособия и курсы:

1. Определите контейнер

Мы начнем с определения контейнера, в который поместим три элемента. А именно, header, main и footer. Вот структура страницы:

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

Благодаря flexbox мы с легкостью создадим эту функцию. Вот необходимый CSS:

Установив flex-grow: 1 в элементе main, он расширяет блок контента, чтобы покрыть доступное пространство внутри гибкого контейнера. Элементы header и footer имеют ширину по умолчанию в зависимости от их содержимого.

Что касается Internet Explorer

Некоторые версии Internet Explorer не всегда хорошо отображают минимальную высоту гибкого контейнера. В нашем примере (если вы заинтересованы в поддержке IE), одним из способов решения этой проблемы является добавление следующего правила:

Другой простой обходной путь - заменить min-height: 100vh на height: 100vh.

В любом случае, если в ваших проектах требуется поддержка IE, выберите метод, который лучше всего подходит для вашего контента и макета.

Углубляемся

Вот начальная заготовка на СodePen, элементы которой для ясности выделены разными цветами:

Теперь детально рассмотрим дочерные элементы контейнера.

2. Хедер

Хедер нашей страницы включает в себя три элемента. Логотип, навигация и кнопка призыва к действию. Вот разметка хедера:

Макет меняется в зависимости от размера вьюпорта. На узких экранах (<550 пикселей) это выглядит так:

The header appearance on narrow screens

На более широких экранах макет меняется следующим образом:

The header appearance on wide screens

Чтобы достичь таких небольших изменений макета, наши стили должны соответствовать некоторым требованиям:

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

Следуя предпочтительно мобильному подходу, давайте рассмотрим наиболее важные правила для нашего хедера:

Совет: значение order по умолчанию для flex элементов равно 0. Элементы с одинаковыми значениями order располагаются в соответствии с порядком их появления в исходном документе. По этой причине на широких экранах кнопка появляется после навигации (≥ 550 пикселей).

3. Контент элемента main 

Основное содержание нашей страницы состоит из некоторого вертикально центрированного текста, расположенного поверх фонового изображения.

The appearance of the main section of our page

Вот структура для этого блока:

И самые важные стили, включая переменные CSS:

Здесь нет ничего сложного. Опять же, благодаря flexbox мы можем вертикально центрировать содержимое элемента  main. Плюс просто для удовольствия, мы применяем свойство background-blend-mode для браузеров, которые его поддерживают.

4. Футер

Футер страницы включает в себя два элемента; один содержит информацию об авторских правах, а другой - ссылки на социальные сети. Вот разметка:

Опять же, расположение элементов макета должно меняться в зависимости от размера вьюпорта.

На узких экранах (<550 пикселей) это выглядит так:

The footer appearance on narrow screens

На более широких экранах макет выглядит следующим образом:

The footer appearance on wide screens

Учитывая скриншоты выше, должно произойти следующее:

  • На маленьких экранах текст должен быть последним элементом, в то время как на более широких экранах последним должен быть список социальных сетей.
  • На маленьких экранах элементы футера обернуты в два ряда. С другой стороны, на больших экранах все элементы расположены вертикально по центру и равномерно распределены в один ряд.

Основные стили для нашего футера:

Иконки

Наконец, что не менее важно, для отображения иконок я подключил пакет иконок Ionicons.

The required CSS settings

Заключение

В этом уроке мы рассмотрели процесс создания полноэкранной адаптивной страницы с помощью flexbox. Процесс был простым и дал нам возможность улучшить навыки работы с flexbox.

В следующем уроке мы пойдем еще дальше и рассмотрим, как на этой странице анимировать элементы. До встречи!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.