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

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 позволяет полностью придерживаться стандартов резиновой верстки, что решает очень много проблем, которые обычно возникают при верстке «на старый манер».

 

0
Подписаться на новости

Отправить ответ

Оставьте первый комментарий!

  Subscribe  
Уведомить о