Web

Конспект веб-дизайну гнучкої розкладки /flex

Leave a comment

Гибкая раскладка Flexbox

CSS Flexible Box Layout Module //www.w3.org
// Переклад "A Complete Guide to Flexbox" //medium.com

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

//

  • display свойство устанавливает режим компоновки элемента, компоновку flex-контейнера устанавливают два значения:
    • flex
    • inline-flex
  • flex-direction устанавливает направление главной оси и определяет направление flex-элементов размещенных в flex-контейнере:
    • row (по умолчанию) — слева направо
    • row-reverse — элементы располагаются справа налево
    • column аналогично row, только сверху вниз
    • column-reverse аналогично row-reverse, но снизу вверх
  • flex-wrap управляет размещением flex-элементов в ограниченном пространстве
    • nowrap поумолчанию все flex элементы будут выстраиваться в одну линию
    • wrap (по умолчанию) элементы будут переноситься в следующие строки ниже или правей
    • wrap-reverse элементы будут переноситься в предыдущие строки выше или левей
  • flex-flow является сокращением пары свойств flex-direction и flex-wrap (см. выше)
  • justify-content определяет выравнивание вдоль главной оси. Оно помогает распределить лишнее свободное пространство, когда, либо все flex элементы в линии имеют фиксированный размер, либо же нет, но уже достигли своего максимального размера. Оно также влияет на выравнивание элементов, когда те переполнят строку
    • flex-start — дефолтное состояние, при котором элементы расставляются от начала строки
    • flex-end — состояние, в котором элементы размещены с конца строки
    • center — элементы центрированы вдоль строки
    • space-between — элементы равномерно распределены по строке, первый элемент находится вначале строки, последний в конце
    • space-around — элементы равномерно распределены по строке с равным местом вокруг них. Учтите, что визуально пробелы не равномерны, так как все элементы имеют одинаковые пробелы с двух сторон. Первый элемент получит одну единицу свободного места от границы контейнера, но получит две единицы свободного места от следующего элемента, так как у него тоже есть одна единица свободного места с каждой из сторон
    • space-evenly — элементы распределены таким образом, что свободное пространство между любыми двумя элементами равномерно, как и место до границы края контейнера
  • align-items свойство определяет стандартное поведение того, как flex элементы будут располагаться вдоль поперечной оси на заданной строке. Это своебразная версия justify-content, но только для поперечной оси, которая перпендикулярна главной
    • flex-start — всё размещается с начала поперечной оси
    • flex-end — все элементы размещаются с конца поперечной оси
    • center — элементы центрируются по поперечной оси
    • baseline — элементы выравниваются по базовой линии
    • stretch — это дефолтное состояние, при котором элементы заполяют контейнер, с учетом min-width и max-width
  • align-content свойство выравнивает и распределяет строки контейнера, когда есть свободное пространство в поперечной оси, подобно тому как justify-content, оно выравнивает элементы по главной оси. Свойство не имеет эффекта, если строка flex элементов только одна
    • flex-start — строки расположены от начала контейнера
    • flex-end — строки расположены от конца контейнера
    • center — строки расположены от центра контейнера
    • space-between — строки равномерно распределены, первая строка находится вначале контейнера, тогда как последняя находится в конце
    • space-around — строки равномерно распределены с равным местом вокруг каждой строки
    • stretch — стандартное состояние, при котором строки растягиваются на вся оставшееся место

Свойства flex-элемента

//

  • flex-grow положительное значение определяет коэффициент расширения flex-элемента в доступном свободном пространстве и долю свободного пространства при распределение между другими flex-элементами, по умолчанию 0
  • flex-shrink  положительное значение задает коэффициент наименьшего сжатия flex-элемента, по умолчанию 1
  • flex-basis свойство определяет начальный размер элемента, перед тем как оставшееся место будет распределено, по умолчанию auto означает размер по размеру содержимого
  • flex: <flex-grow> <flex-shrink> <flex-basis>; является сокращением
  • align-self свойство flex-элемента подавляет выравнивание flex-контейнера align-items другим значением:
    • auto, flex-start, flex-end, center, baseline, stretch
  • order положительное или отрицательное значение свойства у flex-элемента изменяет его положение в группе, которое по умолчанию соответствует порядку определения 1, 2, 3

!!! Начальное значение каждого из подсвойств этого свойства:
flex-grow: 0
flex-shrink: 1
flex-basis: auto

Свойства влияющие на flex-компоновку

Свойства используемые в block-компоновке применимы и для flex-компоновки:

  • margin следует учитывать, что это свойство у соседних flex-элементов не коллапсирует (в отличие от block-компоновки)
  • row-gap свойство у flex-контейнера устанавливает отступ между строками
  • column-gap свойство у flex-контейнера устанавливает отступ между колонками
  • gap сокращение пары свойств row-gap и column-gap (см. выше)

Практика

xxx

Среди свойств flexbox...

/

Джерела

Leave a Reply