Flexbox появился как ответ на давнюю боль верстальщиков — до него выровнять несколько блоков по высоте или разместить их равномерно по ширине контейнера без танцев с float и хаками было по-настоящему сложно. Сегодня это один из первых инструментов, который осваивают, начиная заниматься вёрсткой всерьез.
Всё начинается с одного свойства — display flex на родительском контейнере. Как только оно применено, все прямые дочерние элементы этого блока превращаются во флекс-элементы и начинают подчиняться новым правилам расположения, даже без единой дополнительной строчки кода.
Свойство flex-direction определяет главную ось — строку или колонку — и от этого зависит, как будут вести себя дальнейшие настройки выравнивания. По умолчанию элементы выстраиваются в строку слева направо, но одной строчкой это можно поменять на вертикальное расположение.
Justify-content управляет распределением элементов вдоль главной оси — можно прижать их к началу, к концу, к центру или равномерно распределить пространство между ними. Align-items работает похожим образом, но по перпендикулярной оси, и именно этой парой свойств чаще всего решается классическая задача центрирования блока на странице.
Отдельного внимания заслуживает свойство flex-wrap — без него все элементы будут пытаться уместиться в одну строку, даже если места объективно не хватает, и начнут сжиматься до неразличимого состояния. Со значением wrap лишние элементы просто переносятся на следующую строку.
У каждого отдельного флекс-элемента есть свои свойства — flex-grow и flex-shrink определяют, насколько охотно элемент растягивается или сжимается относительно соседей, а flex-basis задаёт его базовый размер до применения этих правил.
Наглядное и подробное руководство по всем свойствам Flexbox с картинками для каждого случая есть на странице про флексбокс на MDN, а потренироваться на интерактивных задачках можно на flexbox.malven.co.
