Из Википедии, свободной энциклопедии
Перейти к навигации Перейти к поиску

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

Концепции [ править ]

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

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

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

История [ править ]

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

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

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

Терминология [ править ]

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

Контейнер Flex [ править ]

Родительский элемент, содержащий все гибкие элементы. Используя свойство 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 делает контейнер элементом встроенного уровня . [11]

Выровнять по центру [ править ]

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

дисплей :  гибкий ; align-items :  center ; justify-content :  center ;

Ссылки [ править ]

  1. ^ https://www.w3schools.com/csS/css3_flexbox.asp
  2. ^ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_F flexible_Box_Layout / Basic_Concepts_of_Flexbox
  3. ^ «CSS Flexible Box Layout Module Level 1» . www.w3.org . Проверено 23 июля 2016 .
  4. ^ «CSS Flexible Box Layout Module Level 1» . dev.w3.org . Проверено 23 июля 2016 .
  5. ^ https://www.ibm.com/developerworks/library/wa-cssqueries/index.html
  6. ^ https://github.com/kvdmolen/grid-flexbox-sass
  7. ^ https://www.smashingmagazine.com/2011/09/css3-f flexible- box- layout- explained/
  8. ^ https://www.w3schools.com/csS/css3_flexbox.asp
  9. ^ https://www.w3schools.com/css/css_grid.asp
  10. ^ "Модуль макета гибкого блока CSS" . Могу я использовать . Проверено 3 сентября 2020 .
  11. ^ Использование гибких блоков CSS - руководство веб-разработчика | MDN