Flexbox

CSS Flexbox

Что это такое?

Flexbox - это модуль в CSS3, обеспечивающий гибкое выравнивание элементов, их направление и порядок внутри контейнера. Он состоит из Flex-контейнера и Flex-элементов. Если проще, это удобный способ выравнивания элементов на странице.

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

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

Главная ось (main axis) проходит вдоль Flex-элементов (для строки - слева направо, для колонок - вниз). Начало и конец оси - main start, main end

Поперечная ось (cross axis) проходит перпендикулярно Flex-элементам. Начало и конец оси - cross start, cross end.

Зачем нужен Flexbox?

До появления Flexbox для размещения элементов внутри контейнера широко использовались такие свойства как float, display: inline-block и позиционирование. Появление этого инструмента существенно облегчило следующие задачи:

• распределить все дочерние элементы контейнера по всей доступной ширине/высоте родителя, даже при динамическом изменении их ширины/высоты;

• отцентрировать по горизонтали и вертикали блоки внутри родителя;

• создать колонки с одинаковой высотой вне зависимости от размера контента в них;

• расположить элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх;

Как это использовать?

Разберем простой пример:

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

Имеем родитель - flex-container и детей Item 1, Item 2, Item 3, Item 4. Зададим классам следующие CSS свойства:

.flex-container {
  display: flex;
}
.box {
  text-align: center;
  width: 100px;
  height:50px;
  margin: 0 5px;
}
.box-1 {
  width:50px;
  background: #ff0000;
}
.box-2 {
  width:70px;
  background: #da2cab;
}
.box-3 {
  width:90px;
  background: #008000;
}
.box-4 {
  background: #0000ff;
}

Результат:

Благодаря свойству display: flex родительского контейнера все элементы выстроились в ряд вдоль главной оси.

Важно!

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

Какими свойствами обладает модуль Flexbox?

Основные свойства Flex-контейнера (применяются на родительский контейнер):

• flex-direction: устанавливает направление главной оси flex-контейнера: горизонтально или вертикально. Возможные значения:

  • row - элементы расположены в ряд.

  • row-reverse - элементы расположены в ряд в обратной последовательности.

  • column - элементы расположены в колонку

  • column-reverse - элементы расположены в колонку в обратной последовательности.

Примечание

Значение по умолчанию: row. Это видно на примере выше.

ПРАКТИКА: Поменяйте значение flex-direction класса .flex-container в примере на каждое из значений выше и посмотрите на результат.

• justify-content: выравнивает расположение flex-элементов вдоль главной оси (обычно - горизонтально). Возможные значения:

  • flex-start - все элементы расположены в начале главной оси (main start).

  • flex-end - все элементы расположены в конце главной оси (main end).

  • center - все элементы расположены по центру главной оси.

  • space-around - элементы распределены равномерно вдоль главной оси с небольшими отступами по краям.

  • space-between - элементы распределены равномерно вдоль главной оси без отступов по краям.

Примечание

Значение по умолчанию: flex-start. Это видно на примере выше.

Давайте в наш первый пример классу .flex-container добавим свойство justify-content: flex-end. Получим результат:

ПРАКТИКА: Поменяйте значение justify-content класса .flex-container в примере на каждое из значений выше и посмотрите на результат.

• align-items: выравнивает расположение flex-элементов вдоль поперечной оси (обычно - по вертикали). Принцип действия такой же, как и в justify-content, но в перпендикулярном направлении. Возможные значения:

  • flex-start - элементы в начале поперечной оси (cross start).

  • flex-end - элементы в конце поперечной оси (cross end).

  • center - элементы по центру поперечной оси.

  • baseline - элементы выравниваются по базовой линии

  • stretch - элементы занимают все пространство вдоль поперечной оси (cross axis)

Примечание

Значение по умолчанию: stretch.

Изменим высоту для flex-элемента с классом .box-1 - height: 100px;

ПРАКТИКА: Поменяйте значение align-items класса .flex-container в примере на каждое из значений выше и посмотрите на результат.

• flex-wrap: устанавливает принцип отображения элементов - в одно строку или в несколько. Возможные значения:

  • nowrap - без переноса Flex-элементов на другие строки

  • wrap - с переносом Flex-элементов на другие строки

  • wrap-reverse - с переноса Flex-элементов на другие строки в обратном порядке

Примечание

Значение по умолчанию: nowrap.

Изменим ширину .flex-container и установим width: 200px

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

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

ПРАКТИКА: Поменяйте значения свойств width и flex-wrap в примере и посмотрите на результат.

Основные свойства Flex-элемента (применяются на сам элемент внутри контейнера):

• align-self: переопределяет выравнивание вдоль поперечной оси для отдельных flex-элементов.

Добавим свойство align-self с значением center блоку с классом .box-3

Как результат - только третий блок будет выровнен по центру относительно поперечной оси.

• order: определяет порядок расположения Flex-элементов внутри Flex-контейнера исключительно при помощи CSS.

Зададим нашим четырем блокам свойство order:

.box-1 {
  order: 3;
}
.box-2 {
  order: 1;
}
.box-3 {
  order: 4
}
.box-4 {
  order: 2;
}

Теперь элементы будут расположены в другом порядке.

Результат:

ПРАКТИКА: пример для практики

• flex-grow: определяет коэффициент растяжения Flex-элемента относительно других элементов Flex-контейнера.

Зададим нашим четырем блокам свойство flex-grow:

.box-1 {
  flex-grow: 2;
}
.box-2 {
  flex-grow: 1;
}
.box-3 {
  flex-grow: 2;
}
.box-4 {
  flex-grow: 3;
}

Результат:

ПРАКТИКА: пример для практики

• flex-shrink: о пределяет коэффициент сужения Flex-элемента относительно других элементов Flex-контейнера.

Зададим нашим четырем блокам свойство flex-shrink:

.box-1 {
  flex-shrink: 0;
}
.box-2 {
  flex-shrink: 1;
}
.box-3 {
  flex-shrink: 3;
}
.box-4 {
  flex-shrink: 2;
}

Результат:

ПРАКТИКА: пример для практики

• flex-basis: задает базовую ширину Flex-элемента относительно которой будет происходить растяжение flex-grow или сужение flex-shrink элемента. Возможные значения:

  • auto - значение по умолчанию. Ширина соответствует ширине контента, если она не задана явна CSS свойствами.

  • {число} - ширина элемента в любых доступных единицах измерения (px, %, em и пр.)

Зададим третьему блоку свойство flex-basis:

 .box-3 {
   flex-basis: 200px;
 }

Результат:

ПРАКТИКА: поменяте значение свойства flex-basis для любого из блоков. пример для практики

Примечание

такие свойства как: float, clear, vertical-align никак не влияют на flex-элемент

Как применять Flexbox на практике?

Рассмотрим несколько простых примеров:

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

Примечание

Мы сознательно выбрали изображения различных размеров и не изменяем их для наглядности

<section class="image-container">
    <div class="item-1">
        <img src="{path}"/>
    </div>
    <div class="item-2">
        <img src="{path}"/>
    </div>
    <div class="item-3">
        <img src="{path}"/>
    </div>
    <div class="item-4">
        <img src="{path}"/>
    </div>
</section>

CSS свойства пока не присвоены. Результат:

Добавим классу image-container следующие свойства:

• display: flex

• justify-content: space-around

• justify-content: center

• flex-direction: row-reverse

• align-items: center

• flex-direction: column-reverse

  Добавим классам item-1, item-2, item-3, item-4 следующие свойства:

• order:{значение от 1 до 4 в случаной последовательности}

• align-self:

.item-1 {
    align-self: center;
}
.item-2 {
    align-self: flex-end;
}
.item-3 {
    align-self: flex-start;
}
.item-4 {
    align-self: flex-end;
}

Тут, тут и тут Вы сможете более подробно ознакомиться с технологией Flexbox и менее используемыми свойствами Flex-контейнера и Flex-элементов.

отличный тренажер для оттачивания навыков использования Flexbox