Перейти к основному содержанию

Flexbox и выравнивание

В последнее время все большую популярность набирает модуль Flexbox-лейаута. Все современные браузеры внедряют его поддержку.

Остановимся на нем подробнее.

В последнее время все большую популярность набирает модуль Flexbox-лейаута. Все современные браузеры внедряют его поддержку.

Изображение удалено.

Более подробно можно посмотреть на сайте.

 

Стартуем!

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

 

Термины

Для того, чтобы продолжить, необходимо разобраться с терминами.

Во flexbox существуют:

  • Flex контейнеры

  • Flex элементы

Flex контейнером могут быть как строчные, так и блочные элементы. Задается Flex контейнер, при помощи свойства element { display: flex; }. Все дочерние элементы автоматически становятся Flex элементами.

Пример: если применить свойство display: flex к списку ul (  ul { display: flex; } ) , то все li становятся Flex элементами. Свои свойства существуют как у Flex контейнеров, так и у Flex элементов, но об этом позже.

 

Оси

Одно из главных понятий в flexbox - это оси. Все мы со школы знакомы с декартовой системой координат. Так вот оси - это  тоже самое.

Изображение удалено.

Существует главная ось (Main axis) и поперечная ось (Cross axis). Мы можем менять направление осей, и как следствие расположение элементов, при помощи свойства { display: flex / inline-flex; }. Если задать { display: flex; }, то для окружающих его элементов он будет вести себя как блок ({ display: inline-flex; }, как inline-block), но при этом для элементов, лежащих внутри появляется ряд замечательных свойств.

 

Flex-direction

 

По дефолту, главная ось лежит горизонтально, по это можно изменить при помощи свойства { flex-direction: row / row-reverse / column / column-reverse; }.

Лучше, если это будет наглядно.

 

Изображение удалено.

  • Элементы располагаются в ряд слева направо  { flex-direction: row }
  • Элементы располагаются в ряд справа налево { flex-direction: row-reverse }
  • Элементы располагаются сверху вниз { flex-direction: column }
  • Элементы располагаются снизу вверх { flex-direction: column-reverse}

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

 

Justify-content

justify-content, так же как и flex-direction задается контейнеру и влияет на выравнивание элементов относительно главной оси.

 

Изображение удалено.

  • Элементы располагаются от начала главной оси к ее концу { justify-content: flex-start }
  • Элементы располагаются по середине оси { justify-content: center}
  • Элементы располагаются от с конца главной оси к ее началу { justify-content: flex-end }
  • Элементы располагаются от начала главной оси к ее концу, равномерно распределяя свободное пространство между собой, при этом первый и последний элементы не имеют отступов со стороны контейнера { justify-content: space-between}
  • Элементы располагаются от начала главной оси к ее концу, равномерно распределяя свободное пространство между собой, при этом первый и последний элементы имеют отступы со стороны контейнера равные половине свободного пространства между элементами { justify-content: space-around }

 

Align-items

align-items задается контейнеру и влияет на выравнивание элементов относительно поперечной оси. При помощи этого свойства мы можем выровнять сразу все элементы, находящиеся в контейнере. Вертикальное выравнивание всегда было дилеммой при верстке. Выравнивать элементы, используя  { vertical-align: middle }, { text-align: center} или { line-height }  не совсем верно, т.к. некоторые из этих свойств изначально не предусматривали выравнивание блочных элементов. Fexbox в этом плане просто находка для frontend разработчика.

 

Изображение удалено.

  • Элементы выравниваются у начала поперечной оси { align-items: flex-start }
  • Элементы выравниваются по центру поперечной оси { align-items: center}
  • Элементы выравниваются у конца поперечной оси { align-items: flex-end }
  • Элементы растягиваются на всю высоту поперечной оси { align-items: stretch }

 

Align-self

align-items задается элементу и влияет на выравнивание элемента относительно поперечной оси. Имеет все те же значения, что и свойство align-items, но относится не ко всем, а к какому-то конкретному элементу.

 

Изображение удалено.

  • Элемент выравниваются у начала поперечной оси { align-items: flex-start }
  • Элемент выравниваются по центру поперечной оси { align-items: center }
  • Элемент выравниваются у конца поперечной оси { align-items: flex-end }
  • Элемент растягиваются на всю высоту поперечной оси { align-items: stretch }
Теги: