Flexbox visualization

Свойство display является многоцелевым свойством, определяющим как элемент будет отрисован на странице или как его дочерние элементы будут располагаться внутри.

В данном случае, мы имеем дело со вторым случаем — значение flex влияет на расположение дочерних элементов. Свойство применяется к контейнеру, в котором располагаются элементы и влияет именно на отображение элементов внутри контейнера.

Существует много различных значений свойства display, сейчас мы рассмотрим только flex и block.

Свойство применяется исключительно к флекс-контейнеру и задаёт направление основной оси в этом контейнере, а также направление вдоль этой оси (nomal или reverse), тем самым определяет как флекс-элементы располагаются в контейнере.

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

Дополнительная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Если параметры основной оси не изменены, то дополнительная ось пройдет в направлении сверу вниз.

Свойство применяется к флекс-контейнеру и задаёт возможность переноса флекс-элементов на новую строку, если они не помещаются в рамках флекс-контейнера. По умолчанию флекс-элементы выстраиваются в ряд и стараются уместиться в контейнере «ужимая» свою ширину.

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

Свойство применяется к флекс-контейнеру и определяет как браузер распределяет свободное пространство внутри флекс-контейнера вдоль основной оси.

Данное свойство работает, если внутри флекс-контейнера имеется свободное пространство.

Это свойство определяет как флекс-элементы располагаются вдоль поперечной оси внутри флекс-контейнера.

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

Дополнительная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Если параметры основной оси не изменены, то дополнительная ось пройдет в направлении сверу вниз. Можно вообразить, что свойство align-items это версия justify-content для дополнительной оси (перпендикулярной основной).

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

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

Свойство выравнивает выбраный флекс-элемент — позволяет переопределить выравнивание по умолчанию (или указанное с помощью align-items) для отдельных флекс-элементов.

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

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

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

Важно отметить, что свойство order переставляет элементы лишь визуально, не нарушая изначальный порядок разметки документа.

По умолчанию значение order равняется 0.

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

По умолчанию значение равно 0 — элементы не растягиваются и не занимают свободное пространство.

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

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

Если один из элементов имеет значение 2, другой значение 1, третий элемент значение равным 0, то элемент со значением 2 займет в два раза больше свободного места, чем остальные элемент со значением 1, элемент со значением 0 не изменит свою ширину.

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

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

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

При значении, отличном от 0 элементы могут сужаться, если их ширина (сумма ширин) больше, чем ширина флекс-контейнера.

Если элементу задать значение 0, то он «расправит плечи», если его ширина больше ширины флекс-контейнера, или сумма ширин флекс-элементов больше, чем ширина их контейнера. Значение 0 запрещает флекс-элементу сужаться.

Если увеличивать значение flex-shrink, то увидим как элемент сужается по отношению к другим флекс-элементам.

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

Конечная ширина флекс-элемента будет зависеть от базовой ширины, установленно свойством flex-basis, и значений flex-grow, flex-shrink, а также от величины контента.

По умолчанию значение auto.

Если установлено значение 0, дополнительное пространство вокруг содержимого не учитывается.