CSS-флексбокс №1. Создание вашего первого макета Flexbox

В конце 2018 года мы опубликовали книгу о CSS Grid, инструменте компоновки, который произвел революцию в веб-дизайне веб-интерфейса. CSS Grid полностью встроен в CSS и позволяет вам создавать систему компоновки на основе сетки, используя столбцы и строки.

«Объяснение CSS Grid» сразу же стало одним из наших самых продаваемых книг. Итак, мы работаем над большим обновлением и дополнением для этой книги. Мы также начинаем выпускать новую книгу "Объяснение Flexbox". Flexbox тесно связан с CSS Grid, но есть заметные отличия:

• Flexbox — это одномерная модель макета. Он может управлять как столбцами, так и строками.
• CSS Grid — это двухмерная модель макета. Он может управлять как столбцами, так и строками.

В течение следующих нескольких недель мы собираемся опубликовать серию руководств по Flexbox по мере того, как будем писать «Объяснение Flexbox». В этом первом руководстве демонстрируются основные концепции CSS Flexbox с практическими примерами.

Введение во флексбокс

Спецификация CSS Flexbox описывает макет с элементами ( flex-items ) внутри контейнера ( flex-container ). Эти элементы могут увеличиваться или уменьшаться по ширине и/или высоте в зависимости от доступного места в контейнере. Элементы «изгибаются», чтобы наилучшим образом соответствовать родительскому контейнеру.

Эти «гибкие» элементы могут располагаться в любом направлении (встроенная ось или блочная ось), что обеспечивает большую гибкость при изменении размера (ширины или высоты) экрана или его ориентации.

Вы можете ознакомиться со спецификацией Flexbox W3C, нажав на эту ссылку.

Шаг 1. Создайте HTML

Давайте начнем этот пример с создания файла HTML с некоторым образцом кода. Я подготовил для вас HTML-код — это контейнер с 3 дочерними элементами.

• Откройте предпочитаемый редактор кода.
• Создайте пустой файл HTML.
• Посетите эту страницу и скопируйте HTML-код
• Вставьте этот код в свой HTML-файл.

Шаг 2. Создайте CSS

Теперь, когда у нас есть контейнер с тремя элементами, давайте добавим немного стиля.

• Создайте файл CSS с именем style.css. . Поместите этот файл в ту же папку, что и ваш HTML-файл. Ссылка на этот CSS-файл уже находится в теге вашего HTML-файла.
• Скопируйте и вставьте этот код, который также доступен на Codepen:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

На этом изображении показано, как будет выглядеть ваш код, когда вы откроете HTML-файл в браузере. 3 дочерних элемента имеют такую ​​же ширину, как и их родительский контейнер. Высота определяется содержанием каждого элемента. Обратите внимание на отступ 2rem (около 32 пикселей на экране рабочего стола) со всех сторон.

Шаг 3. Стили CSS Flexbox

Теперь пришло время начать часть этого руководства, посвященную Flexbox.

• Отредактируйте файл CSS и добавьте этот код:

 .container { display: flex; }

На этом изображении показано, как теперь будет выглядеть ваш код:

Что изменилось? С технической стороны родительский контейнер теперь является flex-container . Дочерние элементы превратились во flex-items .

Почему изменились размеры контейнеров? Flex-элементы не такие широкие, как их родительский контейнер. Теперь они такие же широкие, как содержимое внутри них. flex-items отображаются как плавающие элементы слева. Они ведут себя как встроенные элементы.

Чтобы четко видеть ширину родительского контейнера, вы можете применить background-color :

• Отредактируйте код CSS и добавьте этот код:

 .container { display: flex; background-color: #f5ca3c; }

Вот как теперь выглядит контейнер:

Вы уже заметили, что flex-container ведет себя (в основном) как блочный элемент. Однако мы также заставляем контейнер вести себя как встроенный элемент. Для этого мы меняем значение свойства display на inline-flex .

• Отредактируйте код CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

Flex-контейнер теперь является элементом встроенного уровня, как вы можете видеть на этом изображении:

Прежде чем мы продолжим работу с этим руководством, давайте изменим поведение на блочный элемент.

• Отредактируйте код CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Шаг №4. Преобразование строк Flexbox в столбцы

На данный момент мы создали flex-container . Мы также видели, как ведут себя дочерние элементы этого контейнера, когда их превращают в flex-items .

Теперь давайте узнаем, как изменить направление нашего макета. Направление flex-container по умолчанию основано на строках. Однако вы можете изменить это поведение с помощью свойства flex-direction .

• Отредактируйте код CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

После обновления кода вы не увидите никаких изменений, поскольку flex-direction: row является значением по умолчанию. Давайте внесем действительно заметное изменение: отредактируем направление flex-container на column .

• Отредактируйте код CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

На следующем изображении показано изменение вашего макета:

Теперь направление flex-container основано на оси блока (столбца). flex-items выравниваются сверху вниз, и каждый из этих элементов занимает всю ширину своего родительского контейнера. Таким образом, они ведут себя как блочные элементы.

На этом этапе вы можете начать задавать вопросы: « Эй, мой макет теперь выглядит точно так же, как самый первый макет в этом руководстве! » Это правда. Визуально нет никакой разницы между этим текущим макетом с flex-container и первым макетом этого примера с блочным контейнером.

Однако теперь у нас больше контроля. Например, вы можете инвертировать направление flex-items с помощью свойств row-reverse и column-reverse .

• Отредактируйте код CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Это изображение показывает, как ваш макет будет выглядеть после этого нового обновления:

Чтобы увидеть перевернутые flex-items в строке, измените значение свойства flex-direction .

• Отредактируйте код CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Сводка по флексбоксу

Поздравляем! Вы узнали, как объявить flex-container . Вы видели, как ведут себя flex-items в зависимости от направления flex-direction , примененного к их родительскому контейнеру ( row или column ). Также вы знаете, как изменить порядок flex-items на обратный.

Все эти изменения выполняются с помощью CSS, поэтому они не повлияют на структуру HTML-разметки вашего сайта. Это одно из преимуществ использования Flexbox. Инвертирование порядка flex-items — лишь одна из возможностей этого модуля CSS. О Flexbox можно узнать гораздо больше, так что ждите второй части этого руководства через несколько дней.

Другие уроки из этой серии

• CSS-флексбокс №2. Как использовать свойство justify-content
• CSS-флексбокс №3. Свойство align-items
• CSS-флексбокс № 4. Свойство flex-grow