Визуальное руководство по свойствам flexbox

Вёрстка с помощью 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/

Димитар Стоянов

Димитар Стоянов

Димитар страстно любит помогать другим людям, поэтому создал службу Invoicebus, где дизайнеры и разработчики могут создавать и отслеживать свои счета и платежи просто и наглядно.

Автор и редакторы

Автор: Димитар Стоянов
Последнее изменение: 15.05.2018
Редакторы: Влад Мержевич