Что такое Flexbox и как он упрощает вёрстку? 13 свойств

Что такое Flexbox? CSS
Если есть задача упростить выравнивание элементов на странице, то есть множество способов. В том числе и Flexbox. О том, что такое Flexbox в этой статье.

Если есть задача упростить выравнивание элементов на странице, то есть множество способов. В том числе и Flexbox. О том, что такое Flexbox в этой статье.

Стань автором и делись своими знаниями и уменями с другими! Пиши статьи, набирай необходимое их количество и рейтинг, чтобы перейти в штат и зарабатывать на Hack Life!

За подробностями пиши на почту: new@hack-life.ru

Модуль Flexbox Layout (Flexible Box) направлен на обеспечение более эффективного способа размещения, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен и/или динамичен. Основная идея flex layout состоит в том, чтобы дать контейнеру возможность изменять ширину/высоту его элементов (и порядок), чтобы наилучшим образом заполнить доступное пространство.

Что такое Flexbox? Свойства для родительского элемента

display

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

.container {
  display: flex; /* или inline-flex */
}
Flex. Свойство display
Flex. Свойство display

flex-direction

Данное свойство устанавливает основную ось. Таким образом определяется основное направление элементов. Если совсем просто, то по вертикали или по горизонтали. Пример кода:

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
Свойство flex-direction
Flex. Свойство flex-direction

Описание каждого параметра:

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

flex-wrap

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

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Свойство flex-wrap
Flex. Свойство flex-wrap

Описание каждого параметра:

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

flex-flow

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

flex-flow: <flex-direction> || <flex-wrap>

justify-content

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

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
Flex. Свойство justify-content
Flex. Свойство justfy-content

Описание каждого параметра:

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

align-items

Данное свойство определяет поведение элементов вдоль поперечной оси. По сути то же самое, что и justify-content, только для оси поперёк главной. Пример кода:

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
}
Flex. Свойство align-items
Flex. Свойство align-items

Описание каждого параметра:

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

align-content

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

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline;
}
Flex. Свойство align-content
Flex. Свойство align-content

Описание каждого параметра:

  • 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 (по умолчанию): линии растягиваются, чтобы занять оставшееся пространство

Немного про свойства для первых дочерних элементов

order

Данное свойство позволяет определить порядок flex элементов. Ведь по умолчанию все они располагаются по порядку. Пример кода:

.item {
  order: <integer/целое число>; /* по умолчанию 0 */
}
Flex. Свойство order
Flex. Свойство order

flex-grow

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

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

.item {
  flex-grow: <номер>; /* по умолчанию 0 */
}

flex-shrink

Данное свойство определяет способность элемента сжиматься при необходимости. Пример кода:

.item {
  flex-shrink: <номер>; /* по умолчанию 1 */
}

flex-basis

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

.item {
  flex-basis: <длина> | auto; /* по умолчанию auto */
}

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

flex

Данное свойство используется для сокращенного написание трёх вышеописанных свойств в одном. Идеально для сокращения и чистоты кода. Пример кода:

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

align-self

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

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

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

Основа статьи здесь: Habr

Оцените статью
( Пока оценок нет )
Hack Life - веб для всех
Добавить комментарий