Флексы

Обновлено: 20.01.2023

Флексы

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

  • align-content

    align-content

    Задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.

  • align-items

    align-items

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

  • align-self

    align-self

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

  • flex

    flex

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

  • flex-basis

    flex-basis

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

  • flex-direction

    flex-direction

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

  • flex-flow

    flex-flow

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

  • flex-grow

    flex-grow

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

  • flex-shrink

    flex-shrink

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

  • flex-wrap

    flex-wrap

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

  • justify-content

    justify-content

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

  • order

    order

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

  • place-content

    place-content

    Сокращённое свойство place-content одновременно устанавливает значения свойств align-content и justify-content.