Flexbox

04.02.2018

Модель Flexbox Layout (Flexible Box) направлена на предоставление более эффективного способа выстраивания, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен и/или динамичен (таким образом, слово «flex» имеет значение «сгибать»).

Основная идея гибкой (flex) компоновки — предоставить контейнеру возможность изменять ширину/высоту (и порядок) своих элементов, чтобы наилучшим образом заполнить доступное пространство (подстраиваясь под все виды устройств и любые размеры экрана). Гибкий (flex) контейнер расширяет элементы для заполнения свободного места или сжимает их, чтобы предотвратить переполнение.

Самое главное, Flexbox-макет является ориентированным на направление в отличие от обычных макетов (блок, который спозиционирован по вертикали или инлайновый элемент, спозиционированный по горизонтали). Несмотря на то, что они хорошо работают для страниц, им не хватает гибкости для поддержки больших или сложных приложений (особенно, когда речь идет об изменении ориентации, изменении размера, растяжении, сжатии и т. д.).

Макет Flexbox наиболее подходит для компонентов приложения и небольших макетов, в то время как макет Grid предназначен для компоновки большего масштаба.

Пример использования Flexbox

See the Pen Flex by Denis (@deniscreative) on CodePen.0

Полезная инфа:

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