Flexbox Спецификация flexbox
 Скачать 444.24 Kb.
|
|
Flexbox Спецификация flexbox Раньше : макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц Сейчас : технология flexbox, которая легко позволяет создавать сложные и адаптивные веб- страницы CSS Flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами Спецификация flexbox Flexbox позволяет решать следующие задачи: • располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх • переопределять порядок отображения элементов • автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство • решать проблему с горизонтальным и вертикальным центрированием • переносить элементы внутри контейнера, не допуская его переполнения • создавать колонки одинаковой высоты Спецификация flexbox Основные понятия flexbox: • flex container (гибкий контейнер) - родительский элемент, у которого задано свойство display: flex. Внутри него располагаются flex-элементы • main axis (главная ось) - ось, которая проходит в том направлении, вдоль которого расположены flex элементы. Начало и конец этой оси - main start и main end • cross axis (поперечная ось) - ось, которая проходит перпендикулярно flex элементам . Начало и конец этой оси - cross start and cross end • flex items (гибкие элементы) - элементы, размещённые в flex контейнере как flex блоки Расположение элементов flexbox Порядок отображения элементов: Свойство flex-direction определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы). Значения: row Направление слева направо. Flex-элементы выкладываются в строку (значение по умолчанию) row-reverse Направление справа налево. Flex-элементы выкладываются в строку относительно правого края контейнера column Направление сверху вниз. Flex-элементы выкладываются в колонку column-rev erse Колонка с элементами в обратном порядке, снизу вверх. Расположение элементов flexbox Управление многорстрочностью flex-контейнера: Свойство flex-wrap определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера. Значения: nowrap Flex-элементы не переносятся, а располагаются в одну линию слева направо. (значение по умолчанию) wrap Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо wrap-revers e Flex-элементы переносятся на новые линии, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх. Расположение элементов flexbox Краткая запись направления и многострочности: Свойство flex-flow позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap. flex-flow: направление многострочность Значение по умолчанию: flex-flow: row nowrap Расположение элементов flexbox Порядок отображения flex-элементов: Свойство order определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex- контейнера . Применяется к flex-элементам. Значение : целое число, отвечающее за порядок отображения flex-элементов (значения от -1 - элемент перемещается в начало строки, значение 1 — в конец ) Значение по умолчанию: order: 0 Расположение элементов flexbox Гибкость flex-элементов Гибкость - возможность изменять размеры flex-элементов так, чтобы элементы заполняли доступное пространство в основном измерении. Гибкие размеры задаются свойством flex flex: flex-grow flex-shrink flex-basis Значение по умолчанию: flex: 0 1 auto Расположение элементов flexbox Гибкость flex-элементов • Коэффициент роста - свойство flex-grow. Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства . Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства Значение - положительное целое или дробное число, устанавливающее коэффициент роста flex-элемента. Значение по умолчанию: flex-grow: 0 Расположение элементов flexbox Гибкость flex-элементов • Коэффициент сжатия - свойство flex-shrink. Свойство указывает коэффициент сжатия flex-элемента относительно других flex-элементов при распределении отрицательного свободного пространства. Умножается на базовый размер flex-basis. Отрицательное пространство распределяется пропорционально тому , насколько элемент может сжаться. Значение - Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex- элемента Значение по умолчанию: flex-shrink: 1 Расположение элементов flexbox Гибкость flex-элементов • Базовый размер - свойство flex-basis. Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Возможные значения: - auto - элемент получает базовый размер, соответствующий размеру его содержимого, если он не задан явно - content - определяет базовый размер в зависимости от содержимого flex-элемента - длина (в единицах длины как width и height) - базовый размер определяется так же, как для ширины и высоты Значение по умолчанию: flex-basis: auto Выравнивание элементов flexbox Выравнивание по главной оси Свойство justify-content - выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство , незанятое flex-элементами. Значения: flex-start Flex-элементы выкладываются в направлении, идущем от начальной линии flex-контейнера (значение по умолчанию) flex-end Flex-элементы выкладываются в направлении, идущем от конечной линии flex-контейнера center Flex-элементы выравниваются по центру flex-контейнера. space-between Flex-элементы равномерно распределяются по линии. Первый flex-элемент помещается вровень с краем начальной линии, последний flex-элемент — вровень с краем конечной линии, а остальные flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. space-around Flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными flex-элементами было одинаковым, а расстояние между первым / последним flex-элементами и краями flex-контейнера составляло половину от расстояния между flex- элементами. Выравнивание элементов flexbox Выравнивание по поперечной оси Свойство align-items - выравнивает flex-элементы, включая анонимные, по поперечной оси текущей строки flex- контейнера . Значения: flex-start Верхний край flex-элемента помещается вплотную с flex-линией, проходящей через начало поперечной оси flex-end Нижний край flex-элемента помещается вплотную с flex-линией, проходящей через конец поперечной оси. center Поля flex-элемента центрируются по поперечной оси в пределах flex-линии. baseline Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают. stretch Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto, элемент растягивается. Значение по умолчанию Выравнивание элементов flexbox Выравнивание по поперечной оси Свойство align-self - выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание , заданное align-items. Значения: flex-start Верхний край flex-элемента помещается вплотную с flex-линией, проходящей через начало поперечной оси flex-end Нижний край flex-элемента помещается вплотную с flex-линией, проходящей через конец поперечной оси. center Поля flex-элемента центрируются по поперечной оси в пределах flex-линии. baseline Flex-элемент выравнивается по базовой линии. stretch Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto, элемент растягивается. auto Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера. Значение по умолчанию Выравнивание элементов flexbox Выравнивание строк Свойство align-content - выравнивает строки в flex-контейнере при наличии дополнительного пространства на поперечной оси , аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content. Свойство не влияет на однострочный flex-контейнер. Значения: flex-start Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке. flex-end Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке. center Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой. space-betwee n Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично flex-start. space-around Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично center stretch Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Значение по умолчанию |