CSS Flexible Box Layout - CSS Flexible Box Layout

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

Концепции

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

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

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

История

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

Модули CSS 3 включают решения, подобные этому, например flexbox. ^[8] и сетка.^[9]

По состоянию на сентябрь 2020 г.^{[Обновить]}98,69% установленных браузеров (99,29% браузеров для настольных компьютеров и 100% браузеров для мобильных устройств) поддерживают CSS Flexible Box Layout.^[10]

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

Ниже приведены несколько терминов, связанных с моделью гибкого макета.

Гибкий контейнер

Родительский элемент, содержащий все гибкие элементы. Используя свойство CSS display, контейнер можно определить как гибкий или встроенный-гибкий.

Элемент Flex

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

Топоры

Каждый гибкий блок содержит две оси: основную и поперечную. В главная ось ось, по которой элементы выровнены друг с другом. В поперечная ось перпендикулярно главной оси.

Flex-направление

Устанавливает главную ось. Возможные аргументы: строка (по умолчанию), обратная строка, столбец, обратный столбец.

Обосновать содержание

Определяет, как содержимое размещается на главной оси в текущей строке. Необязательные аргументы: left, right, center, space-between, space-around.

Выровнять элементы

Определяет значение по умолчанию для размещения гибких элементов на поперечной оси каждой линии.

Выровнять содержание

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

Выровнять себя

Определяет, как отдельный элемент размещается вдоль поперечной оси. Это отменяет любые значения по умолчанию, установленные с помощью align-items.

Направления

В основной старт / основной конец Стороны определяют, где начать размещение гибких элементов в гибком контейнере, начиная с конца основного начала и заканчивая концом основного конца. В кросс-старт / кросс-конец Стороны определяют, где гибкие линии заполняются гибкими элементами от перекрестного начала до перекрестного конца.

Заказ

Размещает элементы в группах и определяет порядок их размещения в контейнере.

Гибкий поток

Сокращает flex-direction и flex-wrap для размещения гибкого содержимого.

Линии

Элементы Flex могут быть размещены либо на отдельной строке, либо на нескольких строках, как определено свойством flex-wrap, которое управляет как направлением поперечной оси, так и расположением строк в контейнере.

Размеры

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

Назначьте гибкий блок

Обозначить элемент как гибкий относительно легко. Все, что необходимо, - это установить для свойства display значение flex или inline-flex следующим образом:

отображать: сгибать;

Или же:

отображать: встроенный гибкий;

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

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

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

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