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

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

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

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

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

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

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

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

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

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

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

Поперечная ось направлена сверху вниз, и, несмотря на положение главной, она всегда будет пересекать её под прямым углом, к тому же её повернуть невозможно. Не пытайтесь понять что происходит, просто запомните, что:

• При горизонтальном направлении главной оси, направление поперечной — СВЕРХУ ВНИЗ;
• При вертикальном направлении главной оси, направление поперечной — СЛЕВА НАПРАВО;

Свойства флекс-элементов

Рассмотрим основные приемы управления положением флекс-элементов внутри флекс-контейнера.

• Justify-content

  Распределение элементов вдоль главной оси. Задаётся флекс-контейнеру. Его значения:

  • flex-start — по умолчанию, в начале главной оси;
  • center — по центру главной оси;
  • flex-end — в конце главной оси;
  • space-between — флекс-элементы распределяются равномерно вдоль направления главной оси, причем между ними, а также границами флекс-контейнера, отступы не устанавливаются;
  • space-around — флекс-элементы также равномерно распределяются вдоль главной оси, но между ними, а также между границами флекс-контейнера, автоматически устанавливаются отступы равные половине расстояния между соседними элементами;

• Align-items

  Распределение элементов вдоль поперечной оси. Задаётся флекс-контейнеру. Его значения:

  • strech — значение по умолчанию — растягивает элементы на всю высоту флекс-контейнера;
  • center — размещает флекс-элементы в месте пересечения главное и поперечной оси — строго по центру;
  • flex-start — в начале поперечной оси;
  • flex-end — в конце поперечной оси;
  • baseline — располагает флекс-элементы относительно базовой линии текста внутри флекс-контейнера;

• Align-self

  Выравнивание флекс-элементов, а не флекс-контенера. Принимает те же значения, что align-items

• Flex-wrap

  Это свойство решает проблему «перенаселения» флекс-контейнера флекс-элементами. Когда их становится слишком много, для того, чтобы они могли быть размещены на одной линии, flex-wrap может разрешить этот вопрос, разрешив или запретив перенос элементов на новую строку. Его значения:

  • nowrap — по умолчанию — запрещает перенос элементов на новую строку;
  • wrap — разрешает перенос элементов на новую строку;
  • wrap-reverse — разрешает перенос элементов на новую строку, но они располагаются в обратном порядке;

• Align-content

  С помощью этого свойства можно выравнивать ряды флекс-элемента вдоль поперечной оси. Его значения:

  • flex-start — в начале поперечной оси;
  • flex-end — в конце поперечной оси;
  • center — по центру оси;
  • space-between — распределяет элементы равномерно вдоль поперечной оси, не оставляя промежутков;
  • space-around — распределяет элементы равномерно вдоль поперечной оси, причем автоматически устанавливает равные промежутки между рядами, а отступы у краев будут равны половине расстояния между рядами;
  • stretch — по умолчанию — по высоте строки;

• Order

  Это свойство задаёт порядковый номер флекс-элемента, не изменяя при это HTML-код. Согласитесь, удобно? По умолчанию его значение равно 0, при необходимости порядковый номер задаётся положительным или отрицательным целым числом.

• Flex-basis

  Это свойство задаёт базовый размер флекс-элементов. Если его не задать, либо определить как auto, то тогда размер элемента будет основан на свойствах width и height. Но при необходимости можно и задать значение в пикселях, либо процентах (от размера контейнера).

• Flex-grow

  Это свойство управляет растягиванием элементов. Его значение может быть выражено в неотрицательных значениях, причем:

  • Значение flex-grow равно 0 — по умолчанию;
  • flex-grow > 0 — флекс-элемент растягивается, занимая свободное место;

  Чтобы рассчитать итоговый размер, учитывая flex-grow, существует следующий алгоритм:

  • Свободное место = Ширина контента — Сумма базовых размеров элементов;
  • Доля свободного места = Свободное место/Сумма flex-grow всех элементов;
  • Итоговый размер = Базовый размер + (Доля свободного места*flex-grow);

• Flex-shrink

  Это свойство управляет сжатием флекс-элементов. Его значение может быть выражено в неотрицательных значениях, причем:

  • Значение flex-shrink=1 — по умолчанию;
  • flex-shrink > 0 — элемент будет уменьшаться;
  • flex-shrink = 0 — элемент не будет уменьшаться;

  Чтобы рассчитать итоговый размер, учитывая flex-shrink, существует следующий алгоритм:

  • Отрицательное пространство (ОП) = Ширина контента — Сумма базовых размеров элементов;
  • Сумма произведений базовых размеров (СПБР) = (Базовый размер1*flex-shrink1) + (Базовый размер2*flex-shrink2)+…;
  • Нормированный коэффициент сжатия (НКС) = (Базовый размер*flex-shrink)/СПБР;
  • Итоговый размер = Базовый размер — (НКС*ОП);

Если Вы всё еще не используете flexbox в работе, обязательно попробуйте и убедитесь, что на практике он очень удобен. Flexbox позволяет полностью придерживаться стандартов резиновой верстки, что решает очень много проблем, которые обычно возникают при верстке «на старый манер».