Flexbox, viewport и адаптивный интерфейс мобильной страницы

Подготовьтесь заранее

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

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

Сегодня разберём три простые вещи: какой элемент управляет расположением карточек, чем отличаются строка, столбец и перенос, зачем странице настройка viewport. Внедрять Flexbox в свой проект будем на следующей компьютерной практике.

Flexbox: родитель и его дети

Flexbox помогает располагать элементы рядом или друг под другом. Для этого родителю задают display: flex. Этот родитель называется контейнером. Правило управляет только его непосредственными детьми.

Селектор указывает, к каким элементам относится правило. Свойство и значение задают действие.

В этой статье используем обычное направление текста слева направо и порядок элементов из HTML. Для строки можно разрешить перенос через wrap или запретить через nowrap. nowrap — значение по умолчанию. В реальном браузере карточки могут сжиматься. В бумажных схемах ниже отдельно задано, что их размер сохраняется: здесь изучаем только порядок и перенос.

На рисунках четыре карточки с номерами 1–4. Их размер сохраняется: сжатия и роста нет. Места по ширине хватает на три карточки с промежутками, но не на четыре; по высоте места достаточно. Пунктир показывает границу контейнера.

Строка без переноса

flex-direction: row; flex-wrap: nowrap — карточки остаются в одной строке. В нашей модели четвёртая выходит за правую границу.

Столбец

flex-direction: column; flex-wrap: nowrap — те же карточки располагаются сверху вниз.

Строка с переносом

flex-direction: row; flex-wrap: wrap — если следующей карточке не хватает места, она переходит на новую строку. Порядок сохраняется: 1, 2, 3, 4.

Разобранный пример: две кнопки

Нужно расположить две кнопки рядом. Места для обеих хватает.

<nav class="actions">
  <button>Сохранить</button>
  <button>Отмена</button>
</nav>

Ищем общего родителя кнопок: это nav с классом actions. Значит, правило назначаем .actions.

.actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

Если внутри кнопки появится span, он будет ребёнком кнопки, а не непосредственным ребёнком nav. Внешний контейнер продолжит располагать две целые кнопки.

Viewport: страница на телефоне

Viewport — область просмотра страницы в браузере. Чтобы мобильный браузер использовал ширину устройства для вёрстки и исходный масштаб 1, в каждой странице внутри head записывают одну строку:

<meta name="viewport" content="width=device-width, initial-scale=1">

Строка не запрещает человеку увеличивать страницу. Она сама не перестраивает карточки: их расположением управляет CSS.

Самостоятельная работа на бумаге

Подпишите фамилию и номер своего варианта. Выполните три задания. Перенесите на лист таблицы ответов, сохранив номера строк; заполняйте только места с многоточиями. HTML, объяснения и условия целиком переписывать не нужно. Задания одинаковы для всех вариантов.

Задание 1. Найдите контейнер

Нужно расположить рядом две целые карточки А и Б.

<main>
  <h1>Каталог</h1>
  <div class="products">
    <article class="item"><h2>А</h2></article>
    <article class="item"><h2>Б</h2></article>
  </div>
</main>

Задание 2. Покажите расположение

Есть три карточки А, Б, В, именно в таком порядке в HTML. Контейнер уже имеет display: flex. Каждая строка таблицы — отдельный случай.

Условия бумажной модели: карточки сохраняют одинаковый размер, не сжимаются и не растут. В строке хватает места ровно на две карточки с промежутком; третья рядом уже не помещается. По высоте места достаточно для всех карточек.

В каждой строке ответа нарисуйте расположение, обозначая карточки как [А], [Б], [В]. Переход на новую строку показывайте новой строкой рисунка. Если карточка выходит за правую границу контейнера, подпишите её букву в последней колонке; если выхода нет, напишите «нет». Считать размеры не нужно.

Задание 3. Добавьте viewport

В HTML-странице пока нет настройки viewport. Заполните две строки. В строке 3.1 запишите один полный тег с width=device-width и initial-scale=1, как в объяснении. Другие параметры добавлять не нужно. В строке 3.2 укажите пару тегов, между которыми его размещают.

Перед сдачей проверьте: лист подписан, заполнены строки 1.1–1.3, нарисованы три схемы 2.1–2.3 и заполнены строки 3.1–3.2. Сдайте лист преподавателю. Запускать код на этой паре не требуется.