Сент. 13

Обзор CSS Flexbox layout – технологии для расположения блоков на HTML-странице

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

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

Что же такое Flexbox

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

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

Так как Flexbox — это полноценный модуль, а не отдельное свойство, он содержит целый набор свойств.

Некоторые элементы предназначены для работы с родительским контейнером «flex-контейнер». А другие касаются дочерних элементов (известных, как «flex-элементы»).

Если обычная система компоновки основана на блочных и строковых направлениях, то Flexbox основан на «flex-flow направлениях».

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

<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 {
    display: flex;
}

Как можно заметить, элементы выстроились в ряд.

See the Pen codepen.io/sukhachov/pen/mKWxWq">Flexbox template 01 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen

Flex-direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

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

Свойство flex-direction позволяет вращать главную ось.

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

Также существует еще несколько параметров для flex-direction: row-reverse и column-reverse.

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

See the Pen codepen.io/sukhachov/pen/gKWmPB">Flexbox template 03 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.

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

See the Pen codepen.io/sukhachov/pen/xzdqEr">Flexbox template 04 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.

Justify-сontent

Свойство justify-content: может принимать пять разных значений:

flex-start;
flex-end;
center;
space-between;
space-around.

Работу всех этих свойств можно посмотреть, вписав в пример ниже:

See the Pen codepen.io/sukhachov/pen/XYRRBy">Flexbox template 05 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.

Свойство также может принимать пять разных значений:

flex-start;
flex-end;
center;
stretch;
baseline;

Как показано в примере, свойства justify-content и align-items довольно легко объединять:

See the Pen codepen.io/sukhachov/pen/MXmmZB">Flexbox template 06 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.

Align-self

Align-self позволяет выравнивать элементы по отдельности.

.flex-container {
  display: flex;
  min-height:100px;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.box-1 {
  width:50px;  
}
.box-2 {
  width:70px;
}
.box-3 {
  align-self:center;
  width:90px;
}
.box-4 {
  align-self:flex-end;
}

See the Pen codepen.io/sukhachov/pen/RJVMvj">Flexbox template 07 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.

Flex-grow

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

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

<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>



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

See the Pen codepen.io/sukhachov/pen/qKjPGw">Flexbox template 08 by Yaroslav (codepen.io/sukhachov">@sukhachov) on codepen.io">CodePen.

Указывать отрицательные числа нельзя.

Flex-shrink

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

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

Указывать отрицательные числа нельзя.

Flex

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

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

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

Chrome - 21+
Safari - 3.1+
Firefox - 22+
Opera - 12.1+
IE - 11
Edge
Android - 2.1+
iOS - 3.2+

Заключение

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

Эта технология больше подходит для компонентов приложения и небольших макетов, хотя и весьма сложных, тогда как спецификация CSS Grid Layout предназначена для более масштабных макетов.

Плюсы

Не нужны сетки различных HTML-фреймворков
Управление блоками абсолютно наглядно и гибко.
Полностью решена проблема вертикального позиционирования.
Полная поддержка всеми современными браузерами, кроме Internet Explorer.

Минусы

Невозможность использования под Internet Explorer 9.
Internet Explorer 10+ не понимают некоторые условия Flexbox.