Гибкий макет CSS-блока

CSS Flexible Box Layout , широко известный как Flexbox , ^[2] — это модель веб-макета CSS . ^[4] Он находится на стадии рекомендации кандидата (CR) W3C . ^[2] Гибкий макет позволяет автоматически располагать адаптивные элементы внутри контейнера в зависимости от размера области просмотра (экрана устройства).

Концепции

Большинство веб-страниц написаны с использованием комбинации HTML (языка гипертекстовой разметки) и CSS (каскадных таблиц стилей). Короче говоря, HTML определяет содержимое и логическую структуру страницы , а CSS определяет, как она выглядит : цвета, шрифты, форматирование, макет и стиль.

Макет CSS flex-box — это особый способ указать макет HTML-страниц.

Одной из наиболее определяющих особенностей гибкого макета является его способность подгоняться по форме в зависимости от среды просмотра. Гибкие блоки можно регулировать по размеру — либо уменьшать, чтобы избежать ненужной монополизации пространства, либо увеличивать, чтобы освободить место для содержимого, вписывающегося в его границы. Более того, гибкий макет менее ограничителен с точки зрения потока контента, чем другие модели макета CSS, которые обычно являются однонаправленными. Гибкий направленный поток можно указать вправо, влево, вверх или вниз. Отдельные элементы внутри гибкого контейнера также могут автоматически переставляться в соответствии с доступным пространством макета. ^[3]

История

С конца 2000-х годов интенсивное использование Интернета мобильными агентами привело к созданию «гибких макетов» и адаптивных элементов для растущего разнообразия размеров экранов . ^[5] В 2010-х годах интенсивное использование популярных фреймворков макетов JavaScript , таких как Bootstrap , вдохновило CSS на создание гибких рамок и спецификаций макетов в виде сетки. ^[6]

Модули CSS включали подобные решения, такие как Flexbox ^[2] и Grid . ^[7] Flexbox изначально основан на аналогичной функции, доступной в XUL , наборе инструментов пользовательского интерфейса от Mozilla , используемом в Firefox . ^[8]^[9]

По состоянию на декабрь 2022 года ^[update]99,68% установленных браузеров (99,59% браузеров для настольных компьютеров и 100% мобильных браузеров) поддерживают CSS Flexible Box Layout. ^[10]

Терминология

Следующие термины связаны с моделью макета flexbox.

Гибкий контейнер: Родительский элемент, содержащий все гибкие элементы. Используя свойство отображения CSS, контейнер можно определить как гибкий или встроенный.
Гибкий элемент: Любой прямой дочерний элемент, содержащийся в гибком контейнере, считается гибким элементом. Любой текст внутри элемента-контейнера заключен в неизвестный гибкий элемент.
Топоры: Каждый гибкий блок содержит две оси: главную и поперечную. Основная ось — это ось, по которой элементы выравниваются друг с другом. Поперечная ось перпендикулярна главной оси.
Гибкое направление: Устанавливает главную ось. Возможные аргументы: строка (по умолчанию), обратная строка, столбец, обратная колонка.
Justify-содержание: Определяет, как содержимое размещается на главной оси текущей строки. Необязательные аргументы: слева, справа, по центру, пространство между, пространство вокруг.
Выровнять элементы: Определяет значение по умолчанию для размещения гибких элементов на поперечной оси каждой строки.
Выровнять-контент: Определяет значение по умолчанию для выравнивания линий поперечной оси.
Выровнять-самостоятельно: Определяет, как отдельный элемент размещается вдоль поперечной оси. Это переопределяет любые значения по умолчанию, установленные с помощью align-items.

Направления

перекрестный старт
перекрестный: Стороны перекрестного начала/конца определяют, где гибкие линии заполняются гибкими элементами от перекрестного начала до перекрестного конца.
главный старт
основной конец: Стороны main-start/main-end определяют, с чего начать размещение гибких элементов внутри гибкого контейнера, начиная с основного начала и заканчивая основным концом.
Заказ: Размещает элементы в группах и определяет, в каком порядке они должны быть размещены в контейнере.
Гибкий поток: Сокращения flex-direction и flex-wrap для размещения гибкого содержимого.

Линии

Линии: Гибкие элементы могут быть размещены либо на одной строке, либо на нескольких строках, как определено свойством flex-wrap, которое управляет как направлением поперечной оси, так и тем, как линии складываются внутри контейнера.

Размеры

Основной размер
Размер креста: Основной размер и поперечный размер — это высота и ширина гибкого контейнера, каждый из которых относится к основной и поперечной осям соответственно.

Применение

Чтобы обозначить элемент как гибкий элемент, необходимо установить для свойства отображения CSS элемента значение flex или inline-flex, как показано ниже:

дисплей : гибкий ;

Или:

дисплей : встроенный-гибкий ;

При установке для отображения одного из двух значений, указанных выше, элемент становится гибким контейнером, а его дочерние элементы — гибкими элементами. Установка отображения на flex делает контейнер элементом блочного уровня , а установка отображения на inline-flex делает контейнер элементом строчного уровня . ^[4]

Выровнять по центру

Одним из преимуществ flexbox является возможность легко выравнивать элементы внутри контейнера по центру страницы как по вертикали, так и по горизонтали.

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