flex-flow: |<flex-direction>| |<flex-wrap>| ; Значение по умолчанию: row nowrap

↑

▷ Содержание

⇐ ПредыдущаяСтр 2 из 2

СВОЙСТВА FLEX-CONTAINER

1) Создание flex-контейнера

display: flex – блочный flex-контейнер

display: inline-flex – строчный flex-контейнер

2) Задание направления основных осей в контейнере

 flex-direction

Значения: row | row-reverse | column | column-reverse

Задаѐт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере – по строке или в столбец.

3) Перенос flex-элементов внутри flex-контейнера (wrap – перенос)

flex-wrap

Значения: nowrap | wrap | wrap-reverse

4) Сокращение для установки свойств flex-direction и flex-wrap

flex-flow: |<flex-direction>| |<flex-wrap>| ; Значение по умолчанию: row nowrap

5) Выравнивание flex-элементов вдоль главной оси текущей строки flex-контейнера

justify-content Значения: flex-start | flex-end | center | space-between | space-around

6)Выравнивание flex-элементов по поперечной оси текущей строки flex-контейнера

align-items Значения: stretch | flex-start | flex-end | center| baseline

7) Выравнивание строк flex-элементов внутри flex-контейнера по поперечной оси (при наличии свободного пространства)

Имеет эффект только тогда, когда flex-контейнер содержит несколько строк flex-элементов.

align-content Значения: stretch | flex-start | flex-end | center | space-between | space-around

56.CSS. Модель Flexbox. Основные понятия. Свойства flex-item (Привести примеры).

CSS- формальный язык описания внешнего вида документа (веб-страницы), написанного

с использованием языка разметки (чаще всего HTML или XHTML).

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.

Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items).

         МОДЕЛЬ FLEXBOX

Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.

Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).

Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.

Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.

Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.

Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

 СВОЙСТВА FLEX-ITEM

Определение порядка, в котором flex-элементы появляются внутри flex-контейнера

Order: <целое число>Значение по умолчанию: 0

Определение коэффициент роста (grow – расти, увеличиваться) после распределения свободного пространства.

flex-grow: <число> Значение по умолчанию: 0

Определяет, насколько flex-элемент будет увеличиваться относительно остальных flex-элементов во flex-контейнере, при распределении положительного свободного пространства. ОТРИЦАТЕЛЬНЫЕ ЧИСЛА НЕДОПУСТИМЫ

Определение коэффициента сжатия (shrink – сокращаться, сжиматься)

flex-shrink:<число>  Значение по умолчанию: 1 Определяет, насколько flex-элемент будет сжиматься относительно остальных flex-элементов во flex-контейнере, при распределении отрицательного свободного пространства. Отрицательные числа недопустимы.

Определение начального основного размера flex-элемента

 flex-basis  Значения: auto |<ширина>

Сокращение для свойств flex-grow, flex-shrink и flex-basis.

flex  Значения: none | auto | [<flex-grow> <flex-shrink>?||<flex-basis>] Значение по умолчанию: 0 1 auto

W3C рекомендует использовать сокращѐнное свойство flex, вместо отдельных свойств.

Переопределение выравнивания по умолчанию

align-self Значения: auto | flex-start | flex-end | center | baseline | stretch Значение по

умолчанию:autoЗначение auto для align-self вычисляется как значение align-items родительского элемента или stretch, если родитель отсутствует.

Познавательные статьи:



Психологические особенности спортивного соревнования

Приготовление дезинфицирующих растворов различной концентрации

Занятость населения и рынок труда

Социальный статус семьи и её типология