flex-shrink в CSS


Содержание

CSS flex-shrink Свойство

Пример

Пусть второй Flex-Item сократится в три раза больше, чем остальные:

/* Safari 6.1+ */
div:nth-of-type(2) <
-webkit-flex-shrink: 3;
>

/* Standard syntax */
div:nth-of-type(2) <
flex-shrink: 3;
>

Определение и использование

Свойство flex-shrink указывает, как элемент будет сжиматься относительно остальных гибких элементов внутри того же контейнера.

Примечание: Если элемент не является гибким элементом, свойство flex-shrink не имеет эффекта.

Значение по умолчанию: 1
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.flexShrink=»5″

Поддержка браузера

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

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Полное руководство по Flexbox

Введение

Модуль разметки Flexbox ( от английского Flexible Box – гибкий блок ), находящийся на данный момент на этапе « Возможная рекомендация » стандартизации W3C ( W3C Candidate Recommendation ) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически ( вот почему его назвали «гибкий» ).

Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину ( и порядок ) его элементов для оптимального заполнения доступного пространства ( в основном для поддержки всех видов и размеров экранов ).

Flex -контейнер растягивает элементы, чтобы заполнить свободное пространство или сжимает их, чтобы предотвратить выход за границы.

Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам ( блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально ).

И хотя элементы обычной разметки хорошо работают для страниц, им не хватает гибкости ( и это не игра слов ) для поддержки больших и сложных приложений ( особенно если речь заходит об изменении ориентации, размеров, растяжении, сжатии и так далее ).

Примечание : разметка Flexbox лучше всего подходит для компонентов приложения и небольших макетов, в то время как разметка с помощью grid предназначена для верстки более масштабных макетов.

Основные понятия и термины

Так как Flexbox это целый модуль, а не отдельное свойство, он включает в себя много элементов, в том числе и целый набор свойств. Некоторые из них предназначены для применения к контейнеру ( родительскому элементу, известному как flex-контейнер ), в то время как другие должны быть применены к дочерним элементам ( назовем их flex-элементы ).

Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex -разметка базируется на направлениях flex -потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex -разметкой:

В основном, элементы будут размещены либо вдоль главной оси ( от точки main-start до main-end ), либо вдоль поперечной оси ( от точки cross-start до cross-end ):

  • main axis – это главная ось flex -контейнера, вдоль которой размещаются flex -элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction ( смотрите ниже );
  • main-start | main-end — flex -элементы располагаются внутри контейнера, начиная от точки main-start , и доходят до точки main-end ;
  • main size – это ширина или высота flex -элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
  • cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
  • cross-start | cross-end – flex -строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end ;
  • cross size – ширина или высота flex -элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.

Свойства родительского класса (flex-контейнера)

display

Это свойство определяет flex -контейнер: строчной или блоковый, в зависимости от установленного значения. Также оно разрешает flex -контекст для всех его прямых потомков:

Отметим, что CSS -столбцы ( columns ) не имеют эффекта во flex -контейнере.

flex-direction

Это свойство задает главную ось, определяющую направление, в котором размещаются flex -элементы во flex -контейнере. Flexbox ( за исключением опционального обертывания ) является концептом однонаправленной разметки.

Представьте, что flex -элементы в первую очередь располагаются либо в горизонтальных, либо вертикальных колонках:

  • row ( по умолчанию ): слева направо для ltr; справа налево для rtl;
  • row-reverse : справа налево для in ltr; слева направо для rtl;
  • column : так же как row , но сверху вниз;
  • column-reverse : так же как row-reverse , но снизу вверх.

flex-wrap

По умолчанию flex -элементы попытаются втиснуться в одну линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого свойства. Здесь играет роль и направление, в котором располагаются новые линии:

  • nowrap ( по умолчанию ): однострочный / слева направо для ltr; справа налево для rtl ;
  • wrap : многострочный / слева направо для ltr ; справа налево для rtl ;
  • wrap-reverse : многострочный / справа налево для ltr ; слева направо для rtl .

flex-flow (применяется к родительскому элементу flex-контейнера)

Это сокращенная форма свойств flex-direction и flex-wrap , которые вместе определяют главную и поперечную оси flex -контейнера. По умолчанию задается значение row nowrap :

justify-content

Данное свойство задает выравнивание вдоль главной оси. Это помогает распределить лишнее свободное пространство, в том случае, если все flex -элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Также данное свойство позволяет получить контроль над выравниваем элементов, когда они выходят за границы строки:

  • flex-start (по умолчанию): элементы выравниваются к началу строки;
  • flex-end : элементы выравниваются к концу строки;
  • center : элементы выравниваются по центру строки;
  • space-between : элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
  • space-around : элементы распределяются в строке равномерно с одинаковым расстоянием между собой.

align-items

Это свойство определяет то, как по умолчанию располагаются flex -элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси ( перпендикулярной главной ):

  • flex-start : граница элементов cross-start располагается на линии cross-start ;
  • flex-end : граница элементов cross-start располагается на линии cross-end ;
  • center : элементы располагаются по центру поперечной оси;
  • baseline : выравнивание элементов происходит согласно базовой линии;
  • stretch ( по умолчанию ): элементы растягиваются для того, чтобы заполнить контейнер ( с учетом значений min-width/max-width ).

align-content

Это свойство позволяет выравнивать строки внутри flex -контейнера, когда есть свободное место на поперечной оси, что схоже с тем, как свойство justify-content выравнивает отдельные элементы относительно главной оси.

Примечание : это свойство не будет работать, если есть только одна строка flex -элементов:

  • flex-start : строки располагаются в начале контейнера;
  • flex-end : строки располагаются в конце контейнера;
  • center : строки располагаются посередине контейнера;
  • space-between : строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
  • space-around : строки размещены равномерно на одинаковом расстоянии друг от друга;
  • stretch ( по умолчанию ): строки растягиваются, чтобы заполнить оставшееся пространство.

Свойства дочерних элементов

(flex-элементы)

Order

По умолчанию, flex -элементы располагаются в порядке, заданном источником. Однако свойство order контролирует порядок, в котором элементы появляются во flex -контейнере:

flex-grow

Это свойство позволяет flex -элементу « разрастаться » в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex -контейнера может занять элемент.

Если для всех элементов свойство flex-grow установлено в 1, то для каждого дочернего элемента будет задан одинаковый размер внутри контейнера. Если вы установите для одного из дочерних элементов значение 2, то он займет в два раза больше места, чем другие:

Отрицательные числа недопустимы.

flex-shrink

Это свойство определяет для flex -элементов возможность сжиматься в случае необходимости:

Отрицательные числа недопустимы.

flex-basis

Это свойство определяет размер элементов по умолчанию перед распределением оставшегося пространства:

Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink и flex-basis ) задаются опционально. Значения по умолчанию: 0 1 auto :

align-self

Это свойство позволяет переопределить выравнивание, заданное по умолчанию ( или определенное свойством align-items ) для отдельных flex -элементов.

Доступные значения вы можете найти в описании свойства align-items :

Обратите внимание, что float , clear и vertical-align не работают с flex -элементами.

Примеры

Давайте начнем с очень простого примера, решив практически ежедневную проблему: идеальное выравнивание по центру. Нет ничего проще, если использовать flexbox:

Этот пример основывается на том факте, что свойство margin , установленное в значение auto , поглощает лишнее пространство. Поэтому такое задание отступа выравнивает элемент ровно по центру от обеих осей.

Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера ( для эстетичности ), но с возможностью автоматического заполнения.

Мы хотим, чтобы они были красиво, равномерно распределены по горизонтальной оси таким образом, чтобы при изменении размера окна браузера, все смотрелось хорошо ( без использования медиа запросов ):

Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:

Давайте попробуем еще кое-что. Допустим, у нас на самом верху веб-сайта находится меню навигации, выровненное вправо, но мы хотим, чтобы на экранах среднего размера оно располагалось по центру, а для устройств с маленьким экраном – располагалось в один столбец. Все достаточно просто:

Давайте попробуем сделать еще лучше, поиграв с « гибкостью » flex -элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:

Использование префиксов для flexbox

Flexbox требует использования вендорных префиксов для возможности поддержки большинством браузеров. Это включает в себя не только использование вендорных префиксов перед свойствами, но и полностью разные названия свойств и значений.

А все потому, что спецификация flexbox менялась с течением времени, создав « old » ( старую ), « tweener «(промежуточную), и «new» (новую) версии.

Возможно, наилучший выход в этой ситуации — это писать код, используя новый (и финальный) синтаксис и пропускать CSS через Autoprefixer , который очень хорошо обрабатывает откаты к предыдущим версиям.

В качестве альтернативы, ниже приведен Sass метод @mixin для помощи с некоторыми префиксами, который к тому же раскрывает идею того, какие действия должны быть предприняты:

Поддержка браузерами

Разделена « версиями » flexbox на:

  • ( new ) – означает поддержку последнего синтаксиса из спецификации (например, display: flex; ).
  • ( tweener ) – означает поддержку дополнительного неофициального синтаксиса от 2011 года (например, display: flexbox; ).
  • ( old ) – означает поддержку старого синтаксиса от 2009 года (например, display: box; ).
Chrome Safari Firefox Opera IE Android iOS
21+ (new)
20- (old)
3.1+ (old)
6.1+ (new)
2-21 (old)
22+ (new)
12.1+ (new) 10 (tweener)
11+ (new)
2.1+ (old)
4.4+ (new)
3.2+ (old)
7.1+ (new)

Браузер Blackberry версии 10+ поддерживает новый синтаксис.

Данная публикация представляет собой перевод статьи « A Complete Guide to Flexbox » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS свойство flex-shrink

Определяет коэффициент уменьшения ширины флекс-элемента относительно других флекс-элементов внутри контейнера. Работает только если для элемента задана ширина с помощью свойства flex-basis или width.

CSS синтаксис

Возможные значения

Значение Описание
число Положительное целое или дробное число, устанавливающее коэффициент уменьшения флекс-элемента. Значение по умолчанию 1.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем, чтобы ширина каждого второго флекс-элемента была в три раза меньше остальных

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Вся документация по свойству flex находится на официальном сайте.

Для быстрого изучения темы рекомендуем пройти 7-ми дневный марафон Flexbox CSS

display

inline-flex
русский
english

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

Применяется ко: всем элементам.

flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

Applies to: all elements.

flex This value causes an element to generate a block-level flex container box. inline-flex This value causes an element to generate an inline-level flex container box.

flex-direction

row-reverse
column
column-reverse
русский
english

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Применяется к: flex контейнерам.

row Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево. row-reverse Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо. column Главная ось располагается вертикально и направлена сверху вниз. column-reverse Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

Applies to: flex containers.

row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. row-reverse Same as row, except the main-start and main-end directions are swapped. column The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode. column-reverse Same as column, except the main-start and main-end directions are swapped.

flex-wrap

nowrap
wrap-reverse
русский
english

Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Применяется к: flex контейнерам.

Значение по умолчанию: nowrap.

nowrap Флексы выстраиваются в одну линию. wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

Applies to: flex containers.

Initial: nowrap.

nowrap The flex container is single-line. wrap The flex container is multi-line. wrap-reverse Same as wrap.

flex-flow

row nowrap
column-reverse
column wrap
row-reverse wrap-reverse
русский
english

Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Применяется к: flex контейнерам.

Значение по умолчанию: row nowrap.

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

Applies to: flex containers.

Initial: row nowrap.

order

русский
english

Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

Применяется к: flex элементам.

Значение по умолчанию: 0.

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single value, which specifies which ordinal group the flex item belongs to.

A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

Applies to: flex items.

Initial: 0.

justify-content

flex-start
flex-end
center
space-between
space-around
space-evenly
русский
english

Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

Применяется к: flex контейнерам.

Значение по умолчанию: flex-start.

flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Applies to: flex containers.

Initial: flex-start.

flex-start Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. flex-end Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. center Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) space-between Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. space-around Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. space-evenly Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

align-items

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

Применяется к: flex контейнерам.

Значение по умолчанию: stretch.

flex-start Флексы выравниваются в начале поперечной оси контейнера. flex-end Флексы выравниваются в конце поперечной оси контейнера. center Флексы выравниваются по линии поперечной оси. baseline Флексы выравниваются по их базовой линии. Stretch Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex containers.

Initial: stretch.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

align-self

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

Применяется кo: flex элементам.

Значение по умолчанию: auto.

flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. Stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex items.

Initial: auto.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

align-content

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch
русский
english

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

flex-start Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. flex-end Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. center Строки располагаются по центру контейнера. space-between Строки равномерно распределяются в контейнере и расстояние между ними одинаково. space-around Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. space-evenly Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк. stretch Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

CSS flex-shrink Property

Example

Let the second flex-item shrink three times more than the rest:

/* Safari 6.1+ */
div:nth-of-type(2) <
-webkit-flex-shrink: 3;
>

/* Standard syntax */
div:nth-of-type(2) <
flex-shrink: 3;
>

Definition and Usage

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

Note: If the element is not a flexible item, the flex-shrink property has no effect.

Default value: 1
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.flexShrink=»5″ Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

CSS свойство flex-shrink

Свойство flex-shrink определяет, насколько будет уменьшаться элемент относительно других элементов flex-контейнера. Если элементы больше контейнера, они уменьшаются, чтобы поместиться в контейнере. Если свойство flex-shrink не включено в сокращенное объявление flex, значение будет установлено 1 по умолчанию. Если нет гибких элементов, свойство flex-shrink не будет иметь эффекта.

Фактор свойства flex-shrink увеличивается при помощи flex-basis, когда есть распределенное отрицательное пространство.

flex-shrink

Easily manage projects with monday.com

The flex-shrink property is a sub-property of the Flexible Box Layout module.

It specifies the «flex shrink factor», which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row.

When omitted, it is set to 1 and the flex shrink factor is multiplied by the flex basis when distributing negative space.

Syntax

To see the full potential of this demo, you would have to be able to resize its width, so please have a look at it on CodePen directly.

  • The first item has flex: 1 1 20em (shorthand for flex-grow: 1 , flex-shrink: 1 , flex-basis: 20em )
  • The second item has flex: 2 2 20em (shorthand for flex-grow: 2 , flex-shrink: 2 , flex-basis: 20em )

Both flex items want to be 20em wide. Because of the flex-grow (first parameter), if the flex container is larger than 40em, the 2nd child will take twice as much leftover space as the first child. But if the parent element is less than 40em wide, then the 2nd child will have twice as much shaved off of it as the 1st child, making it look smaller (because of the 2nd parameter, flex-shrink).

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex; )
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox; )
  • (old) means the old syntax from 2009 (e.g. display: box; )
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

Размер flex-элемента (свойство flex: flex-grow, flex-shrink, flex-basis) | Flexbox | CSS

Flexbox (флексбокс) предназначен для вёрстки гибких макетов. Ежели свойство display контейнера принимает значение flex , его прямые потомки становятся flex-элементами, размером вдоль главной оси которых можно управлять с помощью свойства flex .

? || flex — это сокращённая запись трёх свойств, значения по умолчанию которых:
  • flex-grow: 0;
  • flex-shrink: 1;
  • flex-basis: auto;
none 0 0 auto
initial 0 1 auto
inherit наследует значение родителя
unset 0 1 auto

Пример вёрстки Flexbox:

flex-basis : исходный размер flex-элемента

auto см. width / height content не поддерживается браузерами initial auto inherit наследует значение родителя unset auto

Если flex-direction имеет значения row или row-reverse , то flex-basis определяет ширину flex-элемента (заменяет свойство width ), если column или column-reverse — высоту flex-элемента (заменяет свойство height ).

Свойства width / height игнорируются, если flex-basis не имеет значение auto .

Свойство flex-basis имеет преимущество перед width / height в удобной записи в одну строку в составе свойства flex . При overflow: visible; (по умолчанию) есть отличие при переполнении flex-элемента (искл., IE):

Свойство flex-basis взаимодействует с box-sizing также как width / height в блочной модели:

Как работает свойство flex :

  • если сумма размеров всех flex-элементов меньше размера flex-контейнера, то применяется flex-grow .
  • если сумма размеров всех flex-элементов равна размеру flex-контейнера, то не применяются ни flex-grow , ни flex-shrink .
  • если сумма размеров всех flex-элементов больше размера flex-контейнера, то применяется flex-shrink .

flex-basis:

flex-grow : доля от поначалу незанятого пространства flex-контейнера, увеличивающая flex-элемент

initial 0 inherit наследует значение родителя unset 0

Если flex-grow имеет значение 0 , то flex-элемент не будет увеличиваться в случае недозаполненности flex-контейнера, он будет опираться на значение flex-basis . Иначе flex-элемент увеличится на величину, равную величине поначалу незанятого пространства flex-контейнера.

Если flex-элементов несколько, то они вне зависимости от исходного размера разделят между собой поначалу незанятое пространство flex-контейнера согласно указанным в flex-grow пропорциям.

flex-shrink : доля от поначалу выходящего за пределы flex-контейнера пространства, уменьшающая flex-элемент

initial 1 inherit наследует значение родителя unset 1

Если flex-shrink имеет значение 0 , то flex-элемент не будет уменьшаться в случае переполнения flex-контейнера, он будет опираться на значение flex-basis . Иначе flex-элемент уменьшится на величину, равную величине поначалу выходящего за flex-контейнер пространства.

Если flex-элементов несколько, то они разделят между собой поначалу выходящее за flex-контейнер пространство согласно указанными в flex-shrink пропорциям.

Flex-элемент не будет ограничен рамками родителя, когда flex-basis / width / height примут значение auto , а flex-shrink / max-width / max-height — 0 (искл., Mozilla Firefox).

Когда длину задаёт flex-basis , а не max-width / max-height / width / height при overflow: visible; (по умолчанию) flex-shrink сожмёт flex-элемент настолько, насколько позволит ему содержимое flex-элемента.

Распределение пространства flex-контейнера в цифрах

Flex-элементы имеют относительную связь друг с другом

Как рассчитывается ширина элементов в flex-контейнере:

Если flex-элементы не заполняют всё пространство flex-контейнера, то сперва определяется свободное пространство в flex-контейнере (flex-контейнер — ( flex-basis + flex-basis + flex-basis )) , затем оно увеличивает flex-элементы согласно заявленным в flex-grow долям

Как рассчитывается ширина элементов в flex-контейнере:

Ширина/высота flex-элемента не превышает значения свойств max-width / max-height

Как рассчитывается ширина элементов в flex-контейнере:

Если размера flex-контейнера не хватает для flex-элементов, то сперва определяется сколько требуется пространства ( flex-basis + flex-basis + flex-basis — flex-контейнер) , затем оно уменьшает flex-элементы согласно заявленным в flex-shrink долям

Как рассчитывается ширина элементов в flex-контейнере:

Ширина/высота flex-элемента не может быть менее значения свойств min-width / min-height

Как рассчитывается ширина элементов в flex-контейнере:

Flex-shrink в CSS

New! My 44-page ebook «CSS in 44 minutes» is out! ��

# flex-shrink

Defines how much a flexbox item should shrink if there’s not enough space available.

default flex-shrink: 1;

If there’s not enough space available in the container’s main axis, the element will shrink by a factor of 1, and will wrap its content.

This is the flex-shrink target

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

Because the target element will not wrap its content, there is a chance for the flexbox container’s content to overflow.

This is the flex-shrink target

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

  • 3 quarters are taken from the red item
  • 1 quarter is taken from the yellow item

CSS :: Модуль CSS Flexbox

Введение в модуль CSS Flexbox

(от англ. CSS Flexible Box Layout — модуль макета гибкого контейнера) — представляет собой специальную блочную модель CSS , которая позволяет эффективно управлять элементами внутри родительского флекс-контейнера. В частности, модель дает возможность располагать дочерние элементы флекс-контейнера в строках или колонках, переопределять порядок их отображения, выравнивать различными способами, а также изменять размеры элементов для корректного заполнения свободного пространства флекс-контейнера.

Как следует из определения, CSS Flexbox представляет собой полноценный модуль и поэтому включает в себя целый набор различных свойств, одни из которых применяется к родительскому элементу (т.е. флекс-контейнеру), другие — к самим дочерним элементам (т.е. флекс-элементам). Однако прежде, чем приступить к описанию этих свойств и их возможностей, необходимо познакомиться с понятиями направлений и размеров, которые используются для описания флекс-контейнера (см. рис №1).

Рис. №1. Направления и размеры флекс-контейнера со строками

Схема флекс-контейнера взята из официальной документации W3C . Перечислим основные термины, использующиеся в ней:

  • main axis – главная ось флекс-контейнера, вдоль которой располагаются его флекс-элементы (в нашем случае это горизонтальная ось, поэтому горизонтальное направление считается основным);
  • main start и main end – начальная и конечная стороны флекс-контейнера, между которыми располагаются флекс-элементы вдоль главной оси в направлении от main start к main end ;
  • main size – размер флекс-контейнера или флекс-элемента, который принимается за основной; это может быть как ширина, так и высота, в зависимости от того, какая ось будет выбрана главной: горизонтальная или вертикальная (в нашем случае основным размером считается ширина, т.к. соответствующие стороны флекс-контейнера и его флекс-элементов параллельны главной оси);
  • cross axis – поперечная ось флекс-контейнера (она всегда перпендикулярна главной оси);
  • cross start и cross end – начальная и конечная стороны флекс-контейнера, между которыми располагаются флекс-элементы вдоль поперечной оси в направлении от cross start к cross end ;
  • cross size – размер флекс-контейнера или флекс-элемента, который принимается за поперечный (в нашем случае поперечным размером считается высота, т.к. вертикальные стороны флекс-контейнера и его флекс-элементов параллельны поперечной оси).

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

Для того чтобы создать flex -контейнер и получить возможность управлять его flex -элементами, нужно использовать для элемента свойство display со значениями flex или inline-flex (см. пример №2). В первом случае флекс-контейнеры будут вести себя, как блочные элементы, располагаясь друг под другом по вертикали, а во втором — как строчные элементы, выстраиваясь друг за другом по горизонтали.

Пример №2. Пример создания flex-контейнера

В примере мы создали четыре одинаковых блочных флекс-контейнера ( display: flex ), включающих по восемь пронумерованных дочерних элементов. В третий блок мы дополнительно добавили изображения и простой текст. Рассмотрим каждый из этих блоков подробнее.

В первом флекс-контейнере как строчные элементы ‘span’, так и блочные элементы ‘p’ стали флекс-элементами. Поэтому они перестали вести себя по-своему, а по умолчанию выстроились в одну строку вдоль главной оси флекс-контейнера, подстроив по-возможности свою ширину таким образом, чтобы не выйти за его пределы. При этом флекс-элементы заполнили и всю доступную высоту контейнера, т.к. их высоту мы не устанавливали. Однако заметим, что внешние отступы у бывших блочных и строчных элементов по умолчанию разные, в результате и растянулись они по-разному.

Во втором флекс-контейнере мы задали для флекс-элементов высоту, внутренние отступы и внешние отступы со значением margin: auto . Получился интересный результат: высота всех флекс-элементов выровнялась, а внешние отступы сработали в автоматическом режиме не только по горизонтали, но и по вертикали.

В третьем флекс-контейнере мы добавили изображения и простой текст. В такой ситуации изображения и текст без оберток становятся анонимными флекс-элементами, занимая свое место в ряду других флекс-элементов. При этом текст выравнивается по верхнему краю контейнера, а изображение деформируется и растягивается на всю высоту блока. Что касается ширины анонимных блоков, то она зависит от содержимого, т.е. текста или ширины изображения. Далее, учитывая то, что флекс-элементов в блоке стало очень много, а их ширина достигла своего минимального значения, которое у флекс-элементов по умолчанию устанавливается в min-width: auto , они вышли в основном направлении за пределы своего флекс-контейнера.

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

Обязательно скопируйте код себе в редактор и поэкспериментируйте с ним: поизменяйте ширину флекс-элементов, их внутренние и внешние отступы, задавая их также и в процентах, проверьте эффект от фиксированного позиционирования флекс-элементов. Все это поможет вам лучше понять рассматриваемый ниже набор свойств модели CSS Flexbox .

css-свойство flex-direction

Главная ось флекс-контейнера необязательно должна быть направлена горизонтально слева направо. Ее направление можно легко изменить при помощи ненаследуемого css -свойства flex-direction, которое задает направление главной оси флекс-контейнера, определяя порядок расположения флекс-элементов в нем (см. пример №3). В качестве значений свойство принимает следующие ключевые слова:

  • row – главная ось направлена горизонтально в направлении записи текста (используется по умолчанию); напомним, что направление записи текста в элементе задается универсальным атрибутом dir и по умолчанию имеет значение ltr (т.е. слева направо), именно поэтому флекс-элементы по умолчанию также отображаются строкой слева направо в направлении от стороны main start к main end ;
  • row-reverse – главная ось также направлена горизонтально, но при этом стороны main start и main end флекс-контейнера располагаются в направлении противоположном направлению записи текста в контейнере, поэтому флекс-элементы отображаются в строку, но в обратном порядке;
  • column – главная ось направлена вертикально сверху вниз, поэтому флекс-элементы отображаются колонкой сверху вниз в направлении от стороны main start к main end ;
  • column-reverse – главная ось направлена вертикально снизу вверх, поэтому флекс-элементы отображаются колонкой снизу вверх в направлении от стороны main start к main end .

Пример №3. Пример использования свойства flex-direction

Важно понимать, что изменение направления отображения флекс-элементов в своем флекс-контейнере при помощи свойства flex-direction всего лишь визуальный эффект. На самом деле в потоке документа они занимают прежнее расположение и обрабатываются в той же последовательности. Поэтому для реального изменения порядка элементов нужно вносить изменения в исходный код документа.

css-свойство flex-wrap

По умолчанию все флекс-элементы выстраиваются в одну строку, стараясь вместиться в пределах своего флекс-контейнера. В результате, как мы видели в примере выше, могут возникать ситуации, когда флекс-элементы будут выходить за пределы своего контейнера. Для таких ситуаций в CSS предусмотрено ненаследуемое свойство flex-wrap, которое управляет порядком переноса и отображения флекс-элементов на новые строки (см. пример №4). В качестве значений свойство принимает следующие ключевые слова:

  • nowrap – флекс-элементы отображаются в одной линии (значение используется по умолчанию);
  • wrap – флекс-элементы выстраиваются в несколько строк, направление которых задаётся свойством flex-direction;
  • wrap-reverse – флекс-элементы также выстраиваются в несколько строк, но в направлении, которое противоположно направлению заданному свойством flex-direction.

Пример №4. Пример использования свойства flex-wrap

Попробуйте в примере выше поизменять значение свойства flex-direction , обратив внимание на то, как будет изменяться порядок вывода флекс-элементов на новых строках.

Универсальное css-свойство flex-flow

Поскольку свойства flex-direction и flex-wrap используются в паре довольно часто, в CSS добавили ненаследуемое свойство flex-flow, которое может принимать через пробел сразу два значения: ‘flex-flow: flex-direction || flex-wrap’ (см. пример №5). По умолчанию для первого значения используется row , а для второго — nowrap . Если указать только один параметр, второй примет значение по умолчанию.

Пример №5. Пример использования свойства flex-flow

Обратите внимание, что результат отображения данного примера идентичен результату примера №4, но при этом кода написано меньше.

css-свойство order

Иногда может потребоваться, чтобы некоторые флекс-элементы выстраивались вдоль заданного направления не по порядку. В таких случаях следует использовать ненаследуемое css -свойство order, которое применяется к флекс-элементам и переопределяет порядок их отображения. В качестве значений свойство принимает целые числа (как положительные, так и отрицательные). В результате флекс-элементы с меньшими значениями свойства order выводятся раньше, а элементы, имеющие большие значения выводятся позже (см. пример №6). Если флекс-элементы имеют одинаковые значения свойства order , они выводятся согласно их первоначальному порядку.

Пример №6. Пример использования свойства order

В примере выше флекс-элементы первого и третьего блоков выводятся в заданном направлении согласно значениям их свойства flex-flow. А вот во втором и четвертом блоках этот порядок нарушается, т.к. к третьему и шестому элементам применяется свойство order, меняя порядок отображения этих элементов.

Поэкспериментируйте с кодом примера, применяя встроенный стиль с нашим свойством для разных флекс-элементов. Попробуйте не только положительные значения свойства, но и отрицательные.

css-свойство flex-grow

По умолчанию все флекс-элементы занимают свободное пространство своего флекс-контейнера на равных правах. Однако такое поведение можно именить при помощи ненаследуемого css -свойства flex-grow, которое применяется к флекс-элементам и определяет, какую долю свободного пространства будет занимать данный флекс-элемент по сравнению с другими флекс-элементами (см. пример №7). В качестве значений свойство принимает число, называемое флекс-элемента. Он может быть нулем (по умолчанию), а также положительным целым или дробным числом. При этом, чем больше коэффициент роста, тем большая доля свободного пространства достанется данному флекс-элементу по сравнению с другими элементами.

Чтобы рассчитать итоговый размер требуемого флекс-элемента можно использовать следующий алгоритм.

  • Первый шаг. Рассчитываем свободное пространство флекс-контейнера (СПК). Для этого от ширины контейнера (ШК) (чистое пространство без паддингов) отнимаем сумму базовых размеров флекс-элементов (СБР), а также сумму их паддингов (СПЭ), соответствующих данному направлению: СПК = ШК — СБР — СПЭ.
  • Второй шаг. Рассчитываем размер доли свободного пространства (РДСП), которое займет данный флекс-элемент:
    • если сумма всех коэффициентов роста флекс-элементов больше нуля, но меньше единицы (например, равна 0.8 ), то умножаем размер свободного пространства контейнера на коэффициент роста (КР) требуемого флекс-элемента: РДСП = СПК * КР;
    • если сумма всех коэффициентов роста флекс-элементов больше единицы или равна ей, то размер свободного пространства умножаем на коэффициент роста данного элемента, а затем делим результат на сумму коэффициентов роста (СКР) всех элементов контейнера: РДСП = СПК * КР / СКР.
  • Третий шаг. Рассчитываем итоговый размер флекс-элемента (ИР). Для этого прибавляем полученный размер доли свободного пространства контейнера занимаемого элементом к базовому размеру элемента: ИР = БР + РДСП.

Добавим, что в любом случае свободное пространство, которое распределяется между флекс-элементами с отличными от нуля коэффициентами роста, делится между ними пропорционально их коэффициентам роста и затем прибавляется к базовому размеру элемента.

Также отметим, что полученный алгоритм является результатом составления ряда пропорций и уравнений, которые могут быть решены в рамках школьной программы по математике. Но мы этим здесь заниматься не будем, а просто проверим алгоритм на практике.

Пример №7. Пример использования свойства flex-grow

Как видим, в первом блоке флекс-элементы не занимают свободное пространство флекс-контейнера, т.к. по умолчанию их коэффициенты роста равны нулю.

Во втором блоке мы применили встроенный стиль для третьего флекс-элемента, задав ему коэффициент роста 0.5 . Т.к. размер свободного пространства равен 500px- 3*30px- 3*20px= 350px , итоговый размер третьего элемента стал равен 30px+ 350px*0.5= 30px+ 175px= 205px (размеры первого и второго элементов не изменились, т.к. по умолчанию их коэффициенты роста равны нулю).

В третьем блоке сумма коэффициентов роста равна 0.9 (т.е. меньше единицы), а размер свободного пространства равен 350px , т.к. 500px- 3*30px- 3*20px= 350px . Следовательно итоговый размер второго элемента будет равен 30px+ 350px*0.3= 30px+ 105px= 135px , а третьего — 30px+ 350px*0.6= 30px+ 210px= 240px (размер первого элемента не изменился, т.к. по умолчанию его коэффициент роста равен нулю).

В четвертом блоке сумма коэффициентов роста равна 3 (т.е. больше единицы), поэтому элементы распределяют между собой 100% свободного пространства, что составляет величину в 220px , т.к. 500px- 50px- 70px- 100px- 3*20px= 220px (мы использовали встроенные стили для изменения ширины элементов). Следовательно итоговый размер первого элемента будет равен 50px+ 220px*0.5/3= 50px+ 36.67px= 86.67px , второго — 70px+ 220px*1/3= 70px+ 73.33px= 143.33px , третьего — 100px+ 220px*1.5/3= 100px+ 110px= 210px .

Поэкспериментируйте с исходным кодом примера: поизменяйте коэффициенты роста элементов, количество самих элементов, у которых их значения будут отличны от нуля, попробуйте различные значения паддингов и ширины элементов, а в конце используйте свойство ‘box-sizing: border-box’ и посмотрите, как изменится конечный результат при прочих равных условиях. Ну, и в конце хотелось бы напомнить, что результаты изменений вы можете отслеживать в инструментах для разработчиков в своем браузере.

css-свойство flex-shrink

Довольно часто может наблюдаться противоположная ситуация, когда свободное пространство в контейнере отсутствует, а флекс-элементам приходится сжиматься во избежание переполнения своего флекс-контейнера. По умолчанию в таких ситуациях все флекс-элементы отдают свое доступное пространство на общее благо на равных правах. Однако такое поведение можно именить при помощи ненаследуемого css -свойства flex-shrink, которое применяется к флекс-элементам и определяет, какую долю своего доступного пространства будет отдавать данный флекс-элемент по сравнению с другими флекс-элементами (см. пример №8). В качестве значений свойство принимает число, называемое флекс-элемента. Он может быть нулем (флекс-элемент не участвует в сжатии) или любым положительным целым или дробным числом (по умолчанию 1 ). При этом следует помнить, что при установке паддингов у флекс-элементов, они при сжатии не уменьшаются (уменьшаться может только сам базовый размер элемента). Кроме того, чем больше коэффициент сжатия, тем сильнее сжимается элемент по сравнению с другими элементами.

Чтобы рассчитать итоговый размер требуемого флекс-элемента можно использовать следующий алгоритм.

  • Первый шаг. Рассчитываем размер свободного отрицательного пространства флекс-контейнера (РСОПК). Для этого от ширины контейнера (ШК) (чистое пространство без паддингов) отнимаем сумму базовых размеров флекс-элементов (СБР), а также сумму их паддингов (СПЭ), соответствующих данному направлению: РСОПК = ШК — СБР — СПЭ;
  • Второй шаг. Находим сумму произведений (СПБР) базовых размеров (БР) флекс-элементов на их коэффициенты сжатия (КС): СПБР = БР1*КС1 + БР2*КС2 + . + БРn*КСn, где n — общее число флекс-элементов контейнера.
  • Третий шаг. Рассчитываем нормированный коэффициент сжатия (НКС) каждого флекс-элемента. Для этого находим произведение базового размера элемента на его коэффициент сжатия, а результат делим на сумму произведений всех базовых размеров флекс-элементов на их коэффициенты сжатия: НКС = БР*КС/СПБР.
  • Четвертый шаг. Рассчитываем итоговый размер флекс-элемента (ИР). Для этого от базового размера флекс-элемента отнимаем произведение модуля размера свободного отрицательного пространства на нормированный коэффициент сжатия: ИР = БР — РСОПК*НКС.

Как видим, алгоритм расчета итогового размера флекс-элемента при сжатии сложнее аналогичного алгоритма при распределении свободного пространства между элементами. Это связано с тем, что при сжатии учитываются не только соотношения коэффициентов сжатия элементов, но и соотношения их размеров между собой. Однако вдаваться в подробности мы не будем, заметим только, что полученный алгоритм (опять же) является результатом составления ряда пропорций и уравнений, которые могут быть решены в рамках школьной программы по математике.

Пример №8. Пример использования свойства flex-shrink

В первом блоке флекс-элементы имеют одинаковый базовый размер (в нашем случае это ширина) в 200px и коэффициент сжатия равный 1 (установился по умолчанию). Рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 3*200px — 3*20px = -360px . Находим сумму произведений базовых размеров флекс-элементов на их коэффициенты сжатия: 200px*1 + 200px*1 + 200px*1 = 600px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента (в нашем случае для всех элементов будет одинаковое значение): 200px*1/600px = 1/3 . Получаем итоговые размеры наших флекс-элементов (тоже будут одинаковы): 200px — 360px*(1/3) = 80px ( и не забываем проверить результат в браузере в инструментах для разработчика).

Во втором блоке флекс-элементы также имеют одинаковый базовый размер (в нашем случае это ширина) в 200px и одинаковый коэффициент сжатия равный 3 . Следовательно они также будут сжиматься полностью одинаково и будут иметь финальные размеры по 80px (схема та же, что и в первом блоке).

В третьем блоке все флекс-элементы имеют коэффициент сжатия равный 1 (установился по умолчанию), но для третьего флекс-элемента мы применили встроенный стиль, увеличив его ширину (базовый размер для нашего случая) до 250px . Рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 2*200px — 250px — 3*20px = -410px . Находим сумму произведений базовых размеров флекс-элементов на их коэффициенты сжатия: 200px*1 + 200px*1 + 250px*1 = 650px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента: для первых двух элементов получаем 200px*1/650px = 4/13 , а для третьего — 250px*1/650px = 5/13 . Рассчитываем итоговые размеры наших флекс-элементов: для первого и второго элементов получаем величину 200px — 410px*(4/13) = 73.85px , а для третьего — 250px — 410px*(5/13) = 92.31px .

В четвертом блоке флекс-элементы имеют различные коэффициенты сжатия и размеры. Рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 200px — 300px — 400px — 3*20px = -660px . Находим сумму произведений базовых размеров флекс-элементов на их коэффициенты сжатия: 200px*0.5 + 300px*2 + 400px*6 = 3100px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента: для первого элемента получаем 200px*0.5/3100px = 2/31 , для второго — 300px*2/3100px = 6/31 , а для третьего — 400px*6/3100px = 24/31 . Рассчитываем итоговые размеры наших флекс-элементов: для первого элемента получаем величину 200px — 660px*(2/31) = 157.42px , для второго — 300px — 660px*(6/31) = 172.33px , а для третьего — 400px — 660px*(24/31) = -110.97px .

Т.к. итоговый размер третьего флекс-элемента стал меньше допустимого минимального размера элемента (в нашем случае это ‘min-width: 50px’ ), то ему присваиваем минимальный размер в 50px , а итоговые размеры первых двух элементов пересчитываем по алгоритму заново, но с учетом того, что третий элемент как бы имеет базовый размер в 50px и коэффициент сжатия 0 . Итак, рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 200px — 300px — 50px — 3*20px = -310px . Находим сумму произведений базовых размеров флекс-элементов участвующих в сжатии на их коэффициенты сжатия: 200px*0.5 + 300px*2 = 700px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента: для первого элемента получаем значение 200px*0.5/700px = 1/7 , а для второго — 300px*2/700px = 6/7 . Рассчитываем итоговые размеры наших флекс-элементов: для первого — 200px — 310px*(1/7) = 155.71px , а для второго — 300px — 310px*(6/7) = 34.29px .

Как видим, для второго элемента значение получилось меньше допустимого минимального, поэтому его ширину также устанавливаем в 50px , а коэффициент сжатия в 0 . Повторяем алгоритм еще раз, но уже для одного оставшегося первого элемента. Рассчитываем размер свободного отрицательного пространства флекс-контейнера: 300px — 200px — 50px — 50px — 3*20px = -60px . Находим сумму произведений базовых размеров флекс-элементов участвующих в сжатии на их коэффициенты сжатия: 200px*0.5 = 100px . Рассчитываем нормированный коэффициент сжатия каждого флекс-элемента: 200px*0.5/100px = 1 . Рассчитываем итоговый размер нашего флекс-элемента: 200px — 60px*1 = 140px .

Поэкспериментируйте с исходным кодом примера: поизменяйте коэффициенты сжатия элементов, попробуйте различные значения паддингов и ширины элементов, а в конце используйте свойство ‘box-sizing: border-box’ и посмотрите, как изменится конечный результат при прочих равных условиях. Опять же, результаты изменений вы можете отслеживать в инструментах для разработчиков в своем браузере.

css-свойство flex-basis

Когда мы имеем дело с флекс-элементами, их базовый размер в зависимости от ситуации может быть как шириной элемента, так и его высотой. Однако в CSS присутствует ненаследуемое css -свойство flex-basis, позволяющее явно задать базовый размер флекс-элемента (см. пример №9). Соответственно, если свойство используется, его значение для определения базового размера будет иметь приоритет над значениями свойств width или height.

В качестве значений свойство flex-basis может принимать:

  • auto – базовый размер флекс-элемента устанавливается автоматически в зависимости от размера его содержимого (используется по умолчанию);
  • размер – разрешается использовать любые доступные в CSS единицы измерения длины, а также проценты, которые рассчитываются относительно размера флекс-контейнера.

Пример №9. Пример использования свойства flex-basis

В первом флекс-контейнере примера мы базовый размер для отдельных флекс-элементов не изменяли, поэтому все элементы визуально отображаются с шириной 70px (направление главной оси у нас горизонтальное, поэтому базовый размер переопределяет ширину). Высота же у всех элементов осталась такой, какой мы определили ее в таблицах стилей, т.е. 20px .

Во втором флекс-контейнере мы каждому флекс-элементу задали свой базовый размер. Высота при этом у всех также осталась равна 20px .

В третьем флекс-контейнере мы изменили направление главной оси на вертикальное и переопределили его высоту, установив новое значение в 380px (чтобы было хорошо видно колонку). Так как теперь направление главной оси вертикальное, базовый размер играет роль высоты. Поэтому мы и видим, что высота первых двух флекс-элементов увеличилась и стала равна базовому размеру, т.е. 70px . А вот ширина всех флекс-элементов стала равна 200px , как и было определено в таблице стилей (ведь в данном блоке базовый размер переопределяет уже высоту). Для третьего элемента мы для примера переопределили его базовый размер, поэтому его высота стала равна 40px , но ширина осталась равна 200px .

Сокращенное css-свойство flex

Для перечисленных выше трех свойств флекс-элементов в CSS предусмотрено сокращенное ненаследуемое css -свойство flex (см. пример №10), которое через пробел позволяет задавать коэффициент роста (по умолчанию используется 0 ), коэффициент сжатия (по умолчанию используется 1 ) и базовый размер флекс-элемента (по умолчанию используется auto ). В случае необходимости разрешается также использовать и следующие служебные слова:

  • none – соответствует комбинации ‘flex: 0 0 auto’ ;
  • auto – соответствует комбинации ‘flex: 1 1 auto’ .

Пример №10. Пример использования свойства flex

Для первого флекс-контейнера в примере мы установили заведомо малую ширину, чтобы флекс-элементам пришлось сжаться, при этом для третьего элемента мы переопределили коэффициент сжатия, заданный в таблице стилей сокращенным свойством flex.

Для второго флекс-контейнера мы наоборот установили заведомо большую ширину, чтобы флекс-элементам пришлось растянуться, при этом для третьего элемента мы переопределили коэффициент роста, заданный в таблице стилей сокращенным свойством flex .

css-свойство justify-content

Помимо управления направлением вывода флекс-элементов CSS предоставляет возможности и по выравниванию их вдоль требуемой оси. Начнем с главной оси. Для управления способом выравнивания флекс-элементов вдоль главной оси и распределения пространства между ними используется ненаследуемое css -свойство justify-content (см. пример №11), которое может принимать в качестве значений следующие ключевые слова:

  • flex-start – флекс-элементы прижимаются к началу строки (используется по умолчанию);
  • flex-end – флекс-элементы прижимаются к концу строки;
  • center – флекс-элементы выравниваются по центру строки;
  • space-between – флекс-элементы равномерно распределяются вдоль строки, но крайние из них прижимаются к соответствующим сторонам флекс-контейнера;
  • space-around – флекс-элементы равномерно распределяются вдоль строки, но пустое пространство перед первым элементом и после последнего будет равно половине пространства между соседними флекс-элементами;
  • space-evenly – флекс-элементы распределяются полностью равномерно, при этом пустое пространство перед первым элементом и после последнего будет такое же, как и между любыми соседними флекс-элементами.

Следует отметить, что если какие-либо флекс-элементы будут иметь ненулевые значения свойств margin или flex-grow, свойство justify-content будет игнорироваться.

Пример №11. Пример использования свойства justify-content

Как видим, в последнем флекс-контейнере конструкция ‘justify-content: space-evenly;’ не сработала, т.к. мы задали для флекс-элементов внешние отступы. Попробуйте сделать тоже самое в таблице стилей для всех флекс-элементов и посмотрите на результат.

css-свойства align-items и align-self

Для управления способом выравнивания флекс-элементов вдоль поперечной оси используются ненаследуемые css -свойства align-items и align-self (см. пример №12). Свойство align-items применяется к флекс-контейнеру и действует сразу на все его флекс-элементы, а свойство align-self применяется к флекс-элементам и позволяет управлять их выравниванием вдоль поперечной оси контейнера по-отдельности (переопределяя значение свойства align-items ).

В качестве значений свойства могут принимать следующие ключевые слова:

  • flex-start – флекс-элементы выравниваются в начале поперечной оси флекс-контейнера;
  • flex-end – флекс-элементы выравниваются в конце поперечной оси флекс-контейнера;
  • center – флекс-элементы выравниваются по линии поперечной оси флекс-контейнера;
  • baseline – флекс-элементы выравниваются по их базовой линии;
  • stretch – флекс-элементы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Свойство align-self может принимать еще и значение auto . В этом случае будет использоваться значение свойства align-items для родительского флекс-контейнера или значение stretch , если родителя нет.

Что касается значений по умолчанию, то для align-items — это stretch , а для align-self — это auto .

Следует отметить, что если будут заданы значения внешних отступов margin в направлении поперечной оси, то свойства align-items и align-self будут игнорироваться.

Пример №12. Пример использования свойств align-items и align-self

В третьем флекс-контейнере мы дополнительно задали внешние отступы вдоль главной оси (в нашем случае это горизонтальное направление). Как видим, выравнивание вдоль поперечной оси сохранилось.

В шестом флекс-контейнере мы переопределили значение свойства align-items для первого и последнего флекс-элементов при помощи свойства align-self, поэтому они и расположились лесенкой.

В последнем флекс-контейнере конструкция ‘align-items: center;’ не сработала, т.к. мы дополнительно задали для флекс-элементов внешние отступы вдоль поперечной оси (в нашем случае она имеет вертикальное направление).

css-свойство align-content

Если флекс-элементов в контейнере достаточно много и у них есть возможность занимать несколько строк, возникает необходимость в выравнивании этих строк и распределении пространства между ними вдоль поперечной оси флекс-контейнера. Для этих целей в CSS предусмотрено ненаследуемое css -свойство align-content (см. пример №13), которое может принимать в качестве значений следующие ключевые слова:

  • flex-start – строки располагаются в начале поперечной оси;
  • flex-end – строки располагаются с конца поперечной оси;
  • center – строки располагаются по центру флекс-контейнера;
  • space-between – строки располагаются равномерно вдоль поперечной оси: расстояние между ними одинаково, но крайние строки прижимаются к соответствующим сторонам флекс-контейнера;
  • space-around – строки располагаются равномерно вдоль поперечной оси: расстояние между ними одинаково, но расстояние между первой строкой и соответствующей стороной контейнера, а также расстояние между последней строкой и соответствующей стороной контейнера, равно половине расстояния между двумя соседними строками;
  • space-evenly – строки располагаются полностью равномерно вдоль поперечной оси: расстояние между ними одинаково, при этом расстояние между первой строкой и соответствующей стороной контейнера, а также расстояние между последней строкой и соответствующей стороной контейнера, равно расстоянию между двумя соседними строками;
  • stretch – строки равномерно растягиваются, заполняя свободное пространство (используется по умолчанию).

Пример №13. Пример использования свойства align-content

Чтобы элементы имели одинаковые размеры и выравнивались равномерно в самих строках, мы для наглядности установили автоматические внешние отступы для всех флекс-элементов ( ‘margin: auto;’ ).

Как видим, модуль CSS Flexbox предоставляет нам достаточно возможностей для создания гибких блоков, в которых мы можем практически любым способом выравнивать требуемый нам контент.

Илон Маск рекомендует:  Что такое код asp getpreviousurl
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL