CSS Flexible Box Layout , широко известный как Flexbox , [2] — это модель веб-макета CSS 3 . [4] Он находится на стадии рекомендации-кандидата (CR) W3C . [2] Гибкая компоновка позволяет автоматически упорядочивать адаптивные элементы внутри контейнера в зависимости от размера экрана (или устройства) .
Большинство веб-страниц написаны на комбинации HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей). Короче говоря, HTML определяет содержание и логическую структуру страницы , а CSS определяет , как она выглядит : цвета, шрифты, форматирование, макет и стиль.
Одной из наиболее определяющих особенностей гибкого макета является его способность подгонки формы в зависимости от среды просмотра. Flex-боксы могут регулироваться по размеру — либо уменьшаться, чтобы избежать излишней монополизации пространства, либо увеличиваться, чтобы освободить место для содержимого, ограниченного его границами. Более того, гибкая компоновка менее ограничивает поток контента, чем, например, блочные и встроенные типы отображения, которые обычно являются однонаправленными. Гибкий направленный поток может быть указан как вправо, влево, вверх или вниз. Отдельные элементы внутри гибкого контейнера также могут автоматически переупорядочиваться и переупорядочиваться в соответствии с доступным пространством макета. [3]
В 2000-х годах интенсивное использование Интернета мобильными агентами мотивировало «жидкие макеты» и адаптивные элементы для растущего разнообразия размеров экрана . [5] В 2010-х интенсивное использование популярных фреймворков макетов JavaScript , таких как Bootstrap , вдохновило CSS на разработку спецификаций flex-box и grid layout. [6]
По состоянию на сентябрь 2020 [Обновить]года 98,69 % установленных браузеров (99,29 % настольных браузеров и 100 % мобильных браузеров) поддерживают CSS Flexible Box Layout. [8]
Чтобы обозначить элемент как flex-элемент, необходимо установить для свойства display элемента CSS значение flex или inline-flex, как показано ниже: