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

Позвольте мне сначала дать вам небольшую предысторию и понимание основ и терминологии. [Не хватает времени? пропустите это сейчас]

ЗАДНИЙ ПЛАН

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

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

Макет Flexbox наиболее подходит для компонентов приложения и мелкомасштабных макетов, тогда как макет Grid предназначен для крупномасштабных макетов.

ОСНОВЫ И ТЕРМИНОЛОГИЯ

Поскольку flexbox — это целый модуль, а не отдельное свойство, он включает в себя множество вещей, включая весь набор свойств. Некоторые из них предназначены для установки в контейнере (родительский элемент, известный как «гибкий контейнер»), тогда как другие предназначены для установки в дочерних элементах (так называемые «гибкие элементы»).

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

Элементы будут располагаться либо по main axis (от main-start до main-end), либо по поперечной оси (от cross-start до cross-end).

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

Свойства для родителя (гибкий контейнер)

отображать

Это определяет гибкий контейнер; inline или block в зависимости от заданного значения. Он включает гибкий контекст для всех своих прямых дочерних элементов.

.container {
  display: flex; /* or inline-flex */
}

flex-направление

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

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row (по умолчанию): слева направо в ltr; справа налево в rtl
  • row-reverse: справа налево в ltr; слева направо в rtl
  • column: то же, что и row, но сверху вниз
  • column-reverse: то же, что и row-reverse, но снизу вверх

гибкая упаковка

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

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (по умолчанию): все гибкие элементы будут в одной строке
  • wrap: flex-элементы переносятся на несколько строк сверху вниз.
  • wrap-reverse: flex-элементы будут переноситься на несколько строк снизу вверх.

гибкий поток

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

.container {
  flex-flow: column wrap;
}

выравнивание содержания

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

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
  • flex-start (по умолчанию): элементы упаковываются в направлении начала flex-направления.
  • flex-end: элементы упаковываются ближе к концу flex-направления.
  • start: элементы упаковываются в начале направления writing-mode.
  • end: товары упаковываются ближе к концу направления writing-mode.
  • left: элементы упаковываются по направлению к левому краю контейнера, если только это не имеет смысла с flex-direction, тогда это ведет себя как start.
  • right: элементы упаковываются по направлению к правому краю контейнера, если только это не имеет смысла с flex-direction, тогда это ведет себя как start.
  • center: элементы располагаются по центру линии
  • space-between: товары распределены в очереди равномерно; первый элемент находится в начальной строке, последний элемент в конечной строке
  • space-around: предметы равномерно распределены в ряду с равным пространством вокруг них. Обратите внимание, что визуально пространства не равны, так как все предметы имеют одинаковое пространство с обеих сторон. Первый элемент будет иметь одну единицу пространства от края контейнера, но две единицы пространства между следующим элементом, потому что этот следующий элемент имеет свой собственный интервал, который применяется.
  • space-evenly: элементы распределяются так, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым.

Обратите внимание, что поддержка браузером этих значений имеет нюансы. Например, space-between так и не получил поддержки в некоторых версиях Edge, а start/end/left/right еще нет в Chrome. MDN имеет подробные графики. Самые безопасные значения — flex-start, flex-end и center.

Есть также два дополнительных ключевых слова, которые вы можете сочетать с этими значениями: safe и unsafe. Использование safe гарантирует, что независимо от того, как вы позиционируете этот тип, вы не можете нажать элемент так, чтобы он отображался за пределами экрана (например, сверху) таким образом, что содержимое также не может быть прокручено (так называемая «потеря данных»). ).

выравнивание элементов

Это определяет поведение по умолчанию для размещения гибких элементов вдоль поперечной оси в текущей строке. Думайте об этом как о версии justify-content для поперечной оси (перпендикулярной главной оси).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • stretch (по умолчанию): растянуть, чтобы заполнить контейнер (по-прежнему соблюдать минимальную ширину/максимальную ширину)
  • flex-start / start / self-start: элементы размещаются в начале поперечной оси. Разница между ними тонкая и заключается в соблюдении правил flex-direction или правил writing-mode.
  • flex-end / end / self-end: элементы размещаются в конце поперечной оси. Разница снова тонкая и заключается в соблюдении flex-direction правил против writing-mode правил.
  • center: элементы центрируются по поперечной оси
  • baseline: элементы выравниваются так, как их базовые линии выравниваются

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

выравнивание содержимого

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

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

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
  • flex-start / start: товары упакованы до начала контейнера. (Более поддерживаемый) flex-start соответствует flex-direction, а start соответствует направлению writing-mode.
  • flex-end / end: товары упакованы до конца контейнера. (Дополнительная поддержка) flex-end учитывает направление flex-direction, а end учитывает направление writing-mode.
  • center: элементы в центре контейнера
  • space-between: элементы распределены равномерно; первая строка находится в начале контейнера, а последняя в конце
  • space-around: элементы равномерно распределены с одинаковым пространством вокруг каждой строки
  • space-evenly: элементы распределены равномерно с равным пространством вокруг них
  • stretch (по умолчанию): строки растягиваются, чтобы занять оставшееся место

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

Свойства для дочерних элементов (гибкие элементы)

приказ:

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

.item {
  order: 5; /* default is 0 */
}

гибкий рост

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

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

.item {
  flex-grow: 4; /* default 0 */
}

Отрицательные числа недействительны.

гибкая усадка

Это определяет способность гибкого элемента сжиматься при необходимости.

.item {
  flex-shrink: 3; /* default 1 */
}

Отрицательные числа недействительны.

гибкая основа

Это определяет размер элемента по умолчанию до распределения оставшегося пространства. Это может быть длина (например, 20%, 5rem и т. д.) или ключевое слово. Ключевое слово auto означает «посмотрите на мое свойство ширины или высоты» (что временно выполнялось ключевым словом main-size, пока оно не стало устаревшим). Ключевое слово content означает «размер на основе содержимого элемента» — это ключевое слово еще недостаточно хорошо поддерживается, поэтому его сложно протестировать и еще труднее узнать, что делают его собратья max-content, min-content и fit-content.

.item {
  flex-basis:  | auto; /* default auto */
}

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

сгибаться

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

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

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

выровнять себя

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

Чтобы понять доступные значения, см. объяснение align-items.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

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

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

Разделено по «версии» flexbox:

  • (новый) означает последний синтаксис из спецификации (например, display: flex;)
  • (твинер) означает странный неофициальный синтаксис 2011 года (например, display: flexbox;)
  • (старый) означает старый синтаксис 2009 года (например, display: box;)

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

ИСТОЧНИК: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Спасибо за чтение. ❤