4 flex: 4 Flex, 30 + 10 саше

Подробный обзор полных и сокращенных свойств Flex

От автора: вы когда-нибудь задумывались о том, как работает свойство CSS flex? Это сокращение от flex-grow, flex-shrink и flex-basis. Наиболее распространенный вариант использования, который я вижу в Интернете — flex: 1. Это возможность flex-элемента расширяться и заполнять все доступное пространство.

В этой статье я подробно рассмотрю сокращенные и полные свойства и объясню, когда и для чего их использовать, с практическими и наглядными примерами.

Свойство flex-grow

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

<div>
<div></div>
<div></div>
<div></div>
</div>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.wrapper {
display: flex;
flex-wrap: wrap;
}

.item {
flex-grow: 1;
}

Примечание: в зависимости от свойства flex-direction flex-grow может влиять на ширину или высоту. В следующих примерах предположим, что для параметра flex-direction установлено значение row (значение по умолчанию), если я не укажу что-то другое.

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

Вам может быть интересно, как пространство распределяется между flex-элементами? Что ж, это хороший вопрос, и я на него скоро отвечу. На рисунке ниже показано, как элементы выглядят без flex-grow. Другими словами, это их естественный размер.

Чтобы понять, как рассчитывается ширина flex-элемента, см. уравнение ниже. Я узнал об уравнении из этого поста Саманты Минг (Спасибо!). Рассчитаем размер элемента, содержащего текст «CSS».

Ширина элемента = ((flex-grow / total flex-grow) * доступное пространство) + начальная ширина элемента

Flex-grow: коэффициент растяжения для элемента

Total flex-grow: сумма значений flex-grow для всех элементов

Доступное пространство: перед применением flex-grow

Ширина элемента: начальная ширина элемента.

-> Ширина элемента = ((1/3) * 498) + 77 = 241

Несколько факторов flex-grow

В предыдущем примере значение flex-grow одинаково для всех элементов. Попробуем добавить flex-grow: 2 для первого элемента. Как это будет рассчитываться? Имейте в виду, что для нашего примера доступно пространство 498px.

Надеюсь, теперь вам стало понятнее.

Можем ли мы использовать ноль в качестве значения flex-grow?

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

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

Flex-grow не делает flex-элементы одинаковыми

Существует распространенное заблуждение, что использование flex-grow сделает элементы равными по ширине. Это неверно. Идея использования flex-grow — распределить доступное пространство. Как вы видели в уравнении, ширина каждого гибкого элемента рассчитывается на основе его начальной ширины (ширины до применения flex-grow).

Если вы хотите, чтобы элементы были одинаковыми по ширине, это можно сделать, используя flex-basis. Я объясню это в следующих разделах.

Свойство flex-shrink

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

Рассмотрим следующий пример. Средний элемент имеет ширину 300px, и установлено flex-shrink: 1. Это позволит элементу уменьшиться в ширину, если нет места для размещения всех flex-элементов.

.item-2 {
width: 300px;
flex-shrink: 1;
}

Браузер сохранит ширину элемента равной 300px при следующих условиях:

Сумма ширины всех элементов меньше ширины оболочки

Ширина области просмотра равна или меньше ширины элемента

Вот как элемент ведет себя с разными размерами области просмотра.

Как вы видите на рисунке, ширина будет 300px до тех пор, пока ширина области просмотра не станет меньше 300px.

Свойство flex-basis

Оно устанавливает начальный размер flex-элемента перед распределением свободного пространства в соответствии с коэффициентами. Размер может относиться к ширине по умолчанию и высоте (в случае flex-direction: column).

Свойство flex-basis может принимать то же значение, что и свойства width или height. Значение по умолчанию — auto, которое разрешается в content. Значение content представляет автоматический размер, основанный на размере содержимого элемента.

.item-1 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}

В приведенном выше примере ширина первого элемента составляет 50%. Важно сбросить значение flex-grow на 0, чтобы элемент не стал больше, чем 50%.

Что будет, если использовать вместо этого 100%? Элемент займет 100% ширины своего родителя, а остальные элементы будут перенесены в новую строку.

.item-1 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;
}

Сокращенное свойство Flex

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

В этом контексте есть кое-что важное, что я хотел бы выделить, а именно абсолютные и относительные flex-элементы. Нет, речь идет не о позиционировании CSS, а о том, что связано с flexbox.

Относительный размер flex-элементов

.item {
/* The default value, equivalent to flex: 1 1 auto */
flex: auto;
}

Размер flex-элементов зависит от содержимого. В результате flex-элементы с большим количеством содержимого будут больше.

Абсолютный размер flex-элементов

Напротив, если для свойства flex-basis установлено значение 0, все flex-элементы будут увеличиваться до одинакового размера.

.item {
/* Equivalent to flex: 1 1 0% */
flex: 1;
}

Что мне нравится в свойстве Flex

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

Одно значение без единиц измерения

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

Два значения без единиц измерения

.item {
flex: 1 1;
}

Значения — flex-grow и flex-shrink соответственно. По умолчанию flex-basis будет 0.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Одно значение длины

Оно будет использоваться для flex-basis. По умолчанию flex-grow и flex-shrink будут 1.

.item {
flex: 100px;
/* flex: 1 1 100px */
}

Использование 0 без единиц измерения

В тех случаях, когда вам нужно установить для flex-basis 0, используя сокращение flex.

Это не рекомендуется делать, так как это запутает и разработчика, и браузер. Как вы можете понять, относится 0 к факторам растяжения или сжатия, или к flex-basis? Это сбивает с толку. Согласно спецификации CSS:

Ноль без единиц измерения, которому не предшествуют два коэффициента сжатия/растяжения, следует интерпретировать как коэффициент сжатия/растяжения. Чтобы избежать неправильного толкования или недопустимых объявлений, авторы должны указать нулевой компонент <’flex-base’> с единицей измерения или поставить перед ним два фактора сжатия/растяжения.

Вместо этого вы должны добавить такие единицы, как px или %.

.item {
flex: 0%;
/* flex: 1 1 0% */
}

Рекомендуется использовать сокращение Flex

Когда вам нужно настроить растяжение, сжатие и базу, лучше использовать для этой цели свойство flex. Согласно спецификации CSS:

Авторам рекомендуется контролировать гибкость, используя сокращение flex, а не напрямую через отдельные свойства, так как сокращение правильно сбрасывает любые неуказанные компоненты для соответствия общему использованию.

Случаи использования

Аватар пользователя

Типичный вариант использования flexbox — пользовательский компонент. Аватар и текстовое содержимое должны находиться в одной строке.

<div>
<img src=»shadeed.jpg» alt=»» />
<div>
<h4>Ahmad Shadeed</h4>
<p>Author of Debugging CSS</p>
</div>
</div>

.user {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.user__avatar {
flex: 0 0 70px;
width: 70px;
height: 70px;
}

Обратите внимание, что я добавил для аватара flex: 0 0 70px. Это важно, так как в некоторых старых браузерах изображение может выглядеть сжатым, если flex не установлено. Добавление этого придает flex более высокий приоритет, чем у свойства width (в случае flex-direction: row) или height (в случае flex-direction: column).

Если мы изменим размер аватара, просто настроив свойство flex, width браузер будет игнорировать.

.user__avatar {
/* The width is 100px, not 70px */
flex: 0 0 100px;
width: 70px;
height: 70px;
}

Заголовок раздела

У вас есть заголовок раздела, и он должен занимать все доступное пространство. Использование flex: 1идеально подходит для этого случая.

.page-header {
display: flex;
flex-wrap: wrap;
}

.page-header__title {
flex: 1;
}

Поле для ввода сообщения

Это очень распространено в приложениях для обмена сообщениями, таких как Facebook Messenger или Twitter. Входные данные должны заполнять доступное пространство с фиксированной шириной до кнопки отправки.

form {
display: flex;
flex-wrap: wrap;
}

input {
flex: 1;
/* Other styles */
}

Приведенные выше сценарии являются полезными примерами использования flex-grow. Однако некоторые случаи игнорируются или вообще не упоминаются в статьях по flex. Давайте рассмотрим их!

Выравнивание последнего элемента на двух карточках

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

<div>
<img src=»thumb.jpg» alt=»»>
<h4>Title short</h4>
<time></time>
</div>

Установив flex-direction: column, мы можем использовать flex-grow для заголовка, чтобы он заполнял доступное пространство, и, таким образом, дата оставалась в конце, даже если заголовок короткий.

.card {
display: flex;
flex-direction: column;
}

/* First solution */
.card__title {
flex-grow: 1;
}

Кроме того, это возможно без использования flex-grow. Благодаря авто полям и flexbox!

/* Second solution */
.card__date {
margin-top: auto;
}

Сценарии использования — более одного фактора Flex

Я имею в виду, что здесь используется flex-grow или flex-shrink, но со значением, отличным от 1. В этом разделе я рассмотрю некоторые идеи, где это можно включить.

Действия в футере

Вдохновленный Facebook (я украл также значки), этот футер состоит из четырех элементов, и последний имеет меньшую ширину. Мы можем сделать следующее:

.actions {
display: flex;
flex-wrap: wrap;
}

.actions__item {
flex: 2;
}

.actions__item.user {
flex: 1;
}

Анимация раскрытия

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

.palette {
display: flex;
flex-wrap: wrap;
}

.palette__item {
flex: 1;
transition: flex 0.3s ease-out;
}

.palette__item:hover {
flex: 4;
}

Расширение тарифного плана

Мне нравится эта демонстрация на Codepen. После активации карта расширяется с flex-grow 4.

Когда содержимое больше, чем его оболочка

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

.wrapper {
display: flex;
}

.wrapper img {
flex: 1;
}

Однако даже при flex: 1 изображения все равно выходят за пределы оболочки. Согласно спецификации CSS:

По умолчанию flex-элементы не сжимаются меньше минимального размера своего содержимого (длины самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите свойство min-width или min-height.

В нашем случае изображения слишком большие, и flexbox не сжимает их, чтобы поместиться в оболочку. Чтобы изменить это поведение, нам нужно установить следующее:

.wrapper img {
flex: 1;
min-width: 0;
}

Заключение

Вот и все. Я объяснил основы свойств flex и, как их использовать. Надеюсь, вы узнали что-то новое из этой статьи. Спасибо за прочтение.

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Flex. Утилиты · Bootstrap. Версия v4.0.0

Быстрое управление компоновкой, выравниванием и калибровкой столбцов сетки, навигации, компонентов и т.д., с полным набором гибких утилит flexbox. Для более сложных реализаций может потребоваться пользовательский CSS.

Задействуйте «гибкое» поведение

Применяйте утилиты display для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.

Я — контейнер flexbox!

<div>Я - контейнер flexbox!</div>

Я встроенный контейнер flexbox!

<div>Я встроенный контейнер flexbox!</div>

Также существуют отзывчивые варианты .d-flex и .d-inline-flex.

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Направление

Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).

Используйте элемент класса .flex-row для задания горизонтального направления (умолчание браузера), или .flex-row-reverse для того, чтобы горизонтальное направление начиналось с противоположной стороны.

Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>

Используйте класс .flex-column для создания вертикального направления, или .flex-column-reverse, чтобы вертикальное направление начиналось с противоположной стороны.

Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>

Для flex-direction также есть отзывчивые вариации.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

Выравнивайте содержимое

Пользуйтесь утилитами justify-content или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column). Выбирайте из start (умолчание браузера), end, center, between или around.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

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

Используйте утилиты align-items в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось у по умолч., ось х – если flex-direction: column). Выбирайте из start, end, center, baseline или stretch (умолчание браузера).

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для align-items.

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

Align self

Используйте утилиты align-self в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч., ось х – если flex-direction: column). Выбирайте из таких же параметров, как у align-items: start, end, center, baseline или stretch (умолчание браузера).

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>

Отзывчивые вариации для align-self.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

Авто-марджины

Флексбокс может невероятные вещи – если вы сочетаете выравнивание гибких элементов с авто-марджинами. Три примера ниже показывают контроль над гибкими элементами через авто-марджины: 1. по умолчанию (нет авто-марджина), 2. «прижимаем» два элемента к правому краю (.mr-auto), 3. «прижимаем» два элемента к левому краю (.ml-auto).

К несчастью, IE10 и IE11 не очень-то поддерживают авто-марджины в гибких элементах, чьи «родительские элементы» имеют атрибут justify-content. Смотри детали здесь.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

С элементами выравнивания

Передвигайте по вертикали один из гибких элементов к верху или низу контейнера, сочетая align-items, flex-direction: column и margin-top: auto или margin-bottom: auto.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

Обертка

Изменяйте способ оборачивания гибких элементов в гибком контейнере. Можете совсем не оборачивать их (умолчание браузера) с классом .flex-nowrap, можете обернуть их классом .flex-wrap или реверсируйте оборачивание с классом .flex-wrap-reverse.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Отзывчивые вариации есть также для flex-wrap.

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

Порядок

Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Так как order принимает цифровое значение (например, 5), добавьте обычный CSS для создания необходимых дополнительных значений.

Первый flex элемент

Второй flex элемент

Третий flex элемент

<div>
  <div>Первый flex элемент</div>
  <div>Второй flex элемент</div>
  <div>Третий flex элемент</div>
</div>

Отзывчивые вариации есть также для order.

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

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

Используйте утилиты align-content в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start (умолчание браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество элементов flex.

Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Отзывчивые вариации есть также для align-content.

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch

Полное руководство по Flexbox – учимся на примерах

Какой самый лучший способ понять Flexbox? Изучить основы и написать кучу разных штук. Именно этим мы и займемся.

Но сначала стоит кое-что уточнить:

• Эта статья написана для разработчиков среднего уровня и предполагает, что вы уже имеете представление о Флексбоксах. Но…
• Если вы в курсе, что такое CSS, но не имели дела с Флексбокс, то здесь находится исчерпывающий гид по технологии (статья в открытом доступе, необходимо, примерно, 45 минут на чтение).
• А если вы не особо хороши в CSS, то я рекомендую вам Полное (Практическое) введение в CSS (платный курс, 74 лекции, английский язык).
• Примеры из статьи можно реализовывать в произвольном порядке.
• Флексбокс – всего лишь технология разметки. Реальные проекты одной только разметкой не ограничиваются.
• Обозначения типа div.ohans означают что это элемент div с классом ohans.

Пример 1. Как сделать фотогалерею на Флексбокс

Разместить фотографии по строкам и столбцам на Флексбокс гораздо проще, чем многим кажется.
Рассмотрим простую сетку:

<main>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

<img src=»/sample.jpg»>

</main>

У нас есть main.gallery и 10 изображений в нем.
Убедимся, что main.gallery растягивается на весь доступный экран:

.gallery {

min-height: 100vh

}

Кое-что об изображениях

По умолчанию все изображения inline-block элементы. У них есть ширина и высота. Они выстроятся в линию (только если они не слишком большие и могут все поместиться)

На старт

Сейчас наша галерея будет выглядеть следующим образом:

Размеры всех 10 изображений остались нетронутыми. При необходимости картинки переместятся на вторую строку. Послушные ребята =)

А теперь, на сцену выходит Флексбокс:

.gallery {

display: flex

}

С этого момента поведение изображений изменилось. Из inline-block элементов они стали flex-items.
В результате применения Флексбокс к .gallery все картинки уместились в одну линию. Да еще и растянулись по вертикали, вот так:

Картинки теперь уместились все в одну линию, да еще и растянулись по вертикали. Жалкое зрелище =(

Все это результат стандартного поведения Флексбокс:

1. Сплющить все дочерние элементы в одну линию и никуда их не переносить. Не самое лучшее решение для галереи, так что изменим его:

.gallery {

flex-wrap: wrap

}

Это разрешит перенос элементов на другую строку как и полагается

Изображения перенесены

2. Теперь картинки располагаются в несколько линий. Но они все еще растянуты по вертикали и это определенно не характерно для изображений в галерее.
Свойство align-items флекс-контейнера по умолчанию равно значению stretch

Изменим его:

.gallery {

…

align-items: flex-start

}

Это защитит картинки от растягивания.

Кроме того они выровнены относительно начала вертикальной оси:

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

Наша мощная флексбокс-галерея готова.

Преимущества использования Флексбокс

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

Кроме легко получаемой адаптивности, преимущество флексбокс заключается в возможностях выравнивания.
Флекс-контейнер .gallery имеет несколько свойств для настройки выравнивания: flex-direction: row , justify-content: flex-start и align-items: flex-start.
Разметку галереи можно легко поменять поигравшись со следующим значением:

.gallery {

…

justify-content:center;

}

Теперь изображения идеально отцентрованы по горизонтали

Кроме того, картинки могут быть отцентрованы и по горизонтали и по вертикали .gallery.

.gallery {

…

justify-content:center;

align-items: center;

}

А теперь изображения выровнены не только горизонтально, но и вертикально

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

Можете посмотреть на действующую Флексбокс галерею здесь.

Пример 2: Как сделать карточки на Флексбокс

Карточки очень популярны в интернете. Гугл, Твиттер, Пинтерест и прочие им подобные – все используют карточки.
В UI-дизайне карточка – это шаблон, объединяющий схожую информацию в адаптивный контейнер. Внешне он напоминает игральную карту.
Существует много хороших способов применения Карточек. Например, сетка с ценами.

Шпаргалка по FLEXBOX // «Фрилансер по жизни»

Значение по умолчанию (не нужно указывать). Flex-элементы прижимаются к началу основной оси.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
justify-content:flex-start;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Flex-элементы прижимаются к концу основной оси.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
justify-content:flex-end;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Flex-элементы располагаются по центру основной оси.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
justify-content:center;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Flex-элементы располагаются равномерно по основной оси. Первый элемент находится в начале оси, последний элемент находится в конце оси.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
justify-content:space-between;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Flex-элементы располагаются равномерно по основной оси .К каждому flex-элементу добавляется пространство слева и справа.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
justify-content:space-around;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

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

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
justify-content:space-evenly;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Bootstrap 4 Flex

Bootstrap 4 Flex

Используйте классы гибкости для управления компоновкой компонентов Bootstrap 4.

Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что Bootstrap 4 теперь использует flexbox вместо float для обработки макета.

Модуль Flexible Box Layout упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в Flex, вы можете прочитать об этом в нашем руководстве по CSS Flexbox.

Примечание. Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации. Однако никаких новых функций добавляться не будет.
Это.

Для создания контейнера flexbox и преобразования прямых дочерних элементов в элементы гибкости используйте класс d-flex :

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Попробуй сам »

Чтобы создать встроенный контейнер flexbox, используйте d-inline-flex class:

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Попробуй сам »

Горизонтальное направление

Используйте .flex-row для отображения гибких элементов
по горизонтали (бок о бок). Это по умолчанию.

Совет: Используйте .flex-row-reverse
для выравнивания по правому краю в горизонтальном направлении:

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1
Flex элемент 2
Элемент Flex 3

Попробуй сам »

Вертикальное направление

Используйте .flex-column для отображения гибких элементов вертикально (друг над другом) или .flex-column-reverse
для изменения вертикального направления:

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1
Flex элемент 2
Элемент Flex 3

Попробуй сам »

Обосновать содержание

Используйте .justify-content- * для изменения выравнивания гибких элементов. Допустимые классы: начало (по умолчанию), конец , центр , между или около :

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Попробуй сам »

Заполнение / равная ширина

Используйте .flex-fill на гибких элементах, чтобы придать им одинаковую ширину:

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Попробуй сам »

Рост

Используйте .flex-grow-1 на гибком элементе, чтобы занять остальное пространство. В приведенном ниже примере первые два гибких элемента занимают необходимое пространство, а последний элемент занимает остальное доступное пространство:

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Попробуй сам »

Совет: Используйте .flex-shrink-1 на гибком элементе для усадки при необходимости.

Заказать

Измените визуальный порядок определенных гибких элементов с помощью классов .order . Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (порядок-1 отображается перед порядком-2 и т. Д.):

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Попробуй сам »

Автоматическая маржа

Легко добавляйте автоматические поля для гибких элементов с помощью .mr-auto (перемещать элементы вправо) или с помощью .ml-auto (перемещать элементы влево):

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1
Flex элемент 2
Элемент Flex 3

Попробуй сам »

Обертка

Управляйте упаковкой гибких элементов в гибкий контейнер с помощью .flex-nowrap (по умолчанию), .flex-wrap или .flex-wrap-reverse .

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

гибкая пленка
Flex-Wrap-Обратный
Flex-Nowrap

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Элемент гибкости 4

Гибкий элемент 5

Гибкий элемент 6

Гибкий элемент 7

Гибкий элемент 8

Гибкий элемент 9

Гибкий элемент 10

Элемент гибкости 11

Гибкий элемент 12

Элемент гибкости 13

Гибкий элемент 14

Гибкий элемент 15

Гибкий элемент 16

Гибкий элемент 17

Гибкий элемент 18

Гибкий элемент 19

Гибкий элемент 20

Гибкий элемент 21

Гибкий элемент 22

Гибкий элемент 23

Гибкий элемент 24

Гибкий элемент 25

Пример

..

Попробуй сам »

Выровнять содержимое

Управляйте вертикальным выравниванием собранных гибких элементов с помощью .align-content- *
классы. Допустимые классы: .align-content-start (по умолчанию), .align-content-end , .align-content-center , .align-content-between , .align-content-about и .align-content-stretch .

Примечание: Эти классы не влияют на отдельные строки гибких элементов.

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами,
путем изменения вертикального выравнивания гибких элементов в поле примера:

выровнять контент-начало
выровнять-контент-конец
выровнять контент-центр
выровнять контент вокруг
выровнять контент-растяжку

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Элемент гибкости 4

Гибкий элемент 5

Гибкий элемент 6

Гибкий элемент 7

Гибкий элемент 8

Гибкий элемент 9

Гибкий элемент 10

Элемент гибкости 11

Гибкий элемент 12

Элемент гибкости 13

Гибкий элемент 14

Гибкий элемент 15

Гибкий элемент 16

Гибкий элемент 17

Гибкий элемент 18

Гибкий элемент 19

Гибкий элемент 20

Гибкий элемент 21

Гибкий элемент 22

Гибкий элемент 23

Гибкий элемент 24

Гибкий элемент 25

Пример

..

Попробуй сам »

Выровнять позиции

Управляйте вертикальным выравниванием отдельных строк гибких элементов с помощью .align-items- *
классы. Допустимые классы: .align-items-start , .align-items-end , .align-items-center , .align-items-baseline и .выровнять элементы-стрейч
(дефолт).

Нажмите кнопки ниже, чтобы увидеть разницу между пятью классами:

выровнять элементы-начало
выровнять элементы-конец
выровнять элементы-центр
выровнять элементы базовой линии
выровнять предметы

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

..

Попробуй сам »

Самовыравнивание

Управляйте вертикальным выравниванием указанного гибкого элемента с помощью .align-self- *
классы. Допустимые классы: .align-self-start , .align-self-end , .align-self-center , .align-self-baseline и .align-self-stretch .
(дефолт).

Нажмите кнопки ниже, чтобы увидеть разницу между пятью классами:

выровнять самозапуск
выровнять саморез
выровнять самоцентр
выровнять себя по базовой линии
выровнять-саморастягиваться

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Попробуй сам »

Адаптивные классы гибкости

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

Символ * можно заменить на sm, md, lg или xl, которые обозначают малый, средний, большой или xlarge.

.

html — Flexbox: 4 элемента в строке

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.