Самоучитель CSS Flexbox

В этом уроке мы узнаем, как добавить тонну гибкости в наши макеты с помощью Flexbox!

Мы используем модуль *Flexible Box Module (*aka. Flexbox) для создания отзывчивых элементов в контейнерах, которые могут быть автоматически упорядочены в зависимости от размера экрана. Он также обладает рядом свойств, которые дают нам полный контроль над тем, как распределяется пространство между элементами на странице.

Известный как «одномерная» модель, Flexbox идеально подходит для расположения элементов в одном направлении (в строке или столбце). CSS Grid Layout — это «двухмерная» модель, которая лучше подходит для размещения элементов в обоих направлениях одновременно.

Flexbox дает нам несколько очень мощных возможностей, которые мы будем изучать в этом руководстве!

Макет Flexbox

Здесь у нас есть контейнер (тилового цвета), содержащий несколько элементов (в коралловых коробках):

HTML:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div> 
</div>

CSS:

* {
  font-family: monospace;
  text-align: center;
  font-size: 44px;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: teal;
  border: 2px solid #000;
}
.flex-container > div {
  width: 100px;
  margin: 20px 15px;
  padding: 10px;
  line-height: 75px;
  background-color: coral;
  border: 2px solid #000;
}

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

Элемент контейнера

Первым шагом при использовании Flexbox является определение гибкого контейнера. Для этого нужно установить свойство display на flex, как показано ниже:

.flex-container {
  display: flex;
}

Теперь нам доступен ряд свойств гибкого контейнера:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Установка контейнера также включает контекст для всех его прямых дочерних элементов (известных как flex-элементы). Подробнее об этом позже. А пока давайте сосредоточимся на свойствах гибкого контейнера!

flex-direction

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

Flex-элементы размещаются либо горизонтально с помощью row, либо вертикально с помощью column.

Используйте значение row для размещения элементов в горизонтальном порядке (слева направо):

.flex-container {
  display: flex;
  flex-direction: row;
}

Порядок может быть изменен с помощью функции row-reverse (элементы будут располагаться справа налево):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Чтобы расположить элементы вертикально (сверху вниз), мы используем значение столбца:

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

А column-reverse изменит порядок (снизу вверх):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

flex-wrap

Свойство flex-wrap позволяет нам выбирать, должны ли наши элементы обворачиваться или нет.

По умолчанию гибкие элементы всегда будут пытаться уместиться на одной строке:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

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

Когда мы установим значение wrap, наши гибкие элементы будут обернуты при необходимости:

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

Мы также можем использовать wrap-reverse, чтобы изменить порядок:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-flow

Свойство flex-flow является сокращением свойств flex-direction и flex-wrap. По умолчанию используется значение row nowrap.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

justify-content

Свойство justify-content определяет выравнивание гибких элементов по главной оси:

.flex-container {
  display: flex;
  justify-content: center;
}

Вот так просто можно отцентрировать наши flex-элементы!

Мы также можем использовать flex-start, чтобы поместить наши элементы в начало контейнера (это значение используется по умолчанию):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Чтобы разместить элементы в конце, используйте flex-end:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Используйте space-around для отображения гибких элементов с пробелами до, между и после:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Это отличается от space-between, который распределяет пространство между гибкими элементами:

.flex-container {
  display: flex;
  justify-content: space-between;
}

align-items

Свойство align-items определяет, как элементы располагаются вдоль поперечной оси.

Я увеличил высоту контейнера в нашем демонстрационном коде до 250px, чтобы лучше показать эффект.

Чтобы выровнять элементы по центру контейнера, мы используем свойство center:

.flex-container {
  display: flex;
  align-items: center;
}

Для размещения в верхней части используем flex-start:

.flex-container {
  display: flex;
  align-items: flex-start;
}

Или используйте flex-end для размещения в нижней части контейнера:

.flex-container {
  display: flex;
  align-items: flex-end;
}

Значение по умолчанию stretch растягивает наши элементы, чтобы заполнить контейнер:

.flex-container {
  display: flex;
  align-items: stretch;
}

Значение базовой линии выравнивает элементы в соответствии с их базовыми линиями:

.flex-container {
  display: flex;
  align-items: baseline;
}

align-content

Свойство align-content используется для выравнивания линий гибких контейнеров.

В этих примерах высота демонстрационного контейнера была увеличена до 350px, а свойство flex-wrap установлено на wrap, чтобы лучше показать, как работает align-content.

Примечание: это свойство не имеет эффекта, когда есть только одна строка гибких элементов!

Если установить значение space-between, то каждая строка будет отображаться с одинаковым пространством между ними:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

Значение space-around будет распределять пространство перед, между и после каждой гибкой линии:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

Значение растяжения по умолчанию растягивает гибкие линии, заполняя все оставшееся пространство:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

Мы можем использовать center, чтобы отобразить гибкие линии в центре контейнера:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Или flex-start для позиционирования в начале контейнера:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

И, наконец, flex-end для позиционирования наших строк в конце контейнера:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

Как добиться идеального центрирования

С Flexbox это довольно просто! Просто убедитесь, что и justify-content, и align-items установлены по центру:

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Дочерние элементы (Flex-элементы)

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

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

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Итак, четыре коралловых блока — это наши flex-элементы, поскольку они являются прямыми дочерними элементами flex-container.

Свойства гибких элементов следующие:

• order
• flex-grow
• flex-shrink
• flex-basis
• align-self
• flex

порядок

Свойство order управляет порядком, в котором гибкие элементы появляются в гибком контейнере.

Значение должно быть числом, как показано ниже:

<div class="flex-container">
  <div style="order: 4">1</div>
  <div style="order: 1">2</div>
  <div style="order: 3">3</div>
  <div style="order: 2">4</div>
</div>

flex-grow

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

Значение должно быть числом.

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

Если один из дочерних элементов имеет значение 2, оставшееся пространство будет (попытается) занять в два раза больше места, чем остальные:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 2">2</div>
  <div style="flex-grow: 1">3</div>
  <div style="flex-grow: 1">4</div>
</div>

flex-shrink

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

Например, мы можем не хотеть, чтобы второй элемент flex уменьшался так же сильно, как остальные:

<div class="flex-container">
  <div>1</div>
  <div style="flex-shrink: 0">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

flex-basis

Свойство flex-basis определяет размер элемента по умолчанию до распределения оставшегося пространства.

Давайте установим начальную длину третьего элемента в 300 пикселей:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 300px">3</div>
  <div>4</div>
</div>

align-self

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

В этих примерах мы будем использовать контейнер высотой 200 пикселей, чтобы лучше проиллюстрировать свойство align-self.

Выровняем третий гибкий элемент по центру контейнера (остальные по умолчанию растягиваются:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Выровняем второй гибкий элемент по низу, а третий — по верху:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-end">2</div>
  <div style="align-self: flex-start">3</div>
  <div>4</div>
</div>

flex (сокращение)

Свойство flex является сокращением для flex-grow, flex-shrink и flex-basis вместе взятых. Свойства flex-shrink и flex-basis являются необязательными, по умолчанию используется значение 0 1 auto.

Например, сделаем второй гибкий элемент не растущим (0), не уменьшаемым (0) и зададим ему начальную длину 300px:

<div class="flex-container">
  <div>1</div>
  <div style="flex: 0 0 300px">2</div>
  <div>3</div>
  <div>4</div>
</div>

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen