Свойство CSS flex

Свойство flex

Свойство CSS flex - это сокращённое свойство, определяющее CSS-способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. При этом у родительского элемента должно быть установлено свойство display : flex (родительский элемент должен являться flex-контейнером).

На практике сокращение (shorthand) flex используется для того, чтобы убедиться, что заданы значения подсвойств flex-grow, flex-shrink и flex-basis.

Значение flex : none эквивалентно значению flex: 0 0 auto и означает, что размер элемента устанавливается в соответствии с его свойствами width и height: он полностью статичный, не сжимается и не увеличивается по отношению к адаптивному контейнеру.

Начальные значения каждого из подсвойств этого свойства:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto.

Для центрирования элемента по осям flex-контейнера используются свойства:

• align-items;
• justify-content.

Пример

flex-grow

CSS-свойство flex-grow определяет количество свободного пространства во flex-контейнере, которое должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»):

• если все sibling-элементы (sibling items — элементы одного уровня вложенности) имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства;
• в противном случае свободное пространство распределяется в соответствии с соотношением, определённым коэффициентами flex-grow каждого элемента.

Пример

Отрицательные значения flex-grow считаются недействительными. Значение по умолчанию 0 (при наличии свободного места элементы не растягиваются).

flex-shrink

Свойство CSS flex-shrink определяет фактор сжатия flex-элемента, если ширина flex-элементов шире, чем содержащий их flex-контейнер.

flex-shrink используется вместе со свойствами flex-grow и flex-basis.

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

flex-basis

CSS-свойство flex-basis задаёт размер flex-элемента по основной оси. Это свойство определяет размер контент-бокса, если он не задан через box-sizing.

Внимание: в случае, если для элемента одновременно заданы flex-basis (отличное от auto) и width (или height в случае flex-direction: column), flex-basis имеет приоритет.

Таким образом, приоритет CSS свойств, определяющих ширину элемента (по убыванию):

1. max-width и min-width;
2. flex-basis;
3. width;
4. content.