Вёрстка с помощью flexbox, официально называемая CSS Flexible Box Layout Module, представляет собой новый модуль компоновки в CSS3, предназначенный для улучшения выравнивания, направления и порядка элементов в контейнере, даже если они имеют динамический или неизвестный размер. Главной характеристикой flex-контейнера является способность менять ширину или высоту дочерних элементов, чтобы наиболее оптимально заполнить доступное пространство при разных размерах экрана.
Многие дизайнеры и разработчики считают, что вёрстка на flexbox легче в использовании, поскольку проще позиционировать элементы, поэтому более сложные макеты можно сверстать с меньшим количеством кода, что в итоге приводит к более простому процессу разработки. Алгоритм вёрстки на flexbox основан на ориентации, в отличие от блочной или строчной вёрстки, которые базируются на вертикали и горизонтали. Вёрстку на flexbox следует использовать для небольших компонентов приложения, в то время как новый CSS Grid Layout Module предназначен для обработки больших масштабируемых макетов.
В этом руководстве мы объясняем как работают flex-свойства и фокусируемся на том, как эти свойства визуально влияют на макет.
Оригинал: scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Демонстрация: codepen.io/justd/full/yydezN/