Flexbox: всё, что Вам нужно о нём знать. Это просто!

Flexbox: всё, что Вам нужно о нём знать. Это просто!

Flexbox — новое слово в вёрстке. всё, что Вам нужно о нём знать — это просто и очень удобно! Основные правила работы мы опишем в этой статье.

Что такое Flexbox, зачем он нужен, почему бы не продолжить колдовать с помощью float?

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

тки, которой очень просто управлять.

Как начать пользоваться Flexbox? Как его включить?

Никаких сложных подключений, никакой магии! Достаточно просто задать элементу, к которому Вы хотите применить «резиновую» верстку, display: flex. Соответственно все вложенные элементы становятся гибкими и подчиняются правилам flexbox. Далее весь его механизм основан на расположении элементов вдоль двух осей: главной и поперечной.

Главная ось и правила потока флекс-элементов вдоль нее

Поток флекс-элементов по направлению главной оси внутри флекс-контейнера

Как видно, как только контейнер принимает условное свойство «flex» поведение всех элементов внутри него начинает подчиняться правилам потока относительно главной и поперечной оси. Итак, направление главной оси по умолчанию — слева направо. Однако, при необходимости, можно разворачивать её в противоположную сторону, используя свойство flex-direction.

Какие значения может принимать свойство flex-direction:

  • row — это значение установлено по умолчанию, и означает стандартное направление слева направо;
  • row-reverse — справа налево;
  • column — направление оси сверху вниз;
  • column-reverse — снизу вверх;

Поперечная ось и направление потока флекс-элементов вдоль нее

Поток флекс-элементов относительно главной и поперечной оси внутри флекс-контейнера