Flexbox

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

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

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

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

Полезная информация — https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

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

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

Условные комментарии для IE

Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet…

Анимация SVG

Есть много разных способов анимировать SVG-изображения. Сейчас я рассмотрю и сделаю себе пометки, как сделать…

Кроссбраузерный GrayScale с поддержкой Internet Explorer 10

Пример кроссбраузерного варианта сделать картинку черно-белой с помощью CSS. IE11 не поддерживает filter. Make an…

Примеры использования селектора :checked с помощью jQuery

Селектор :checked работает для чекбоксов, радио кнопок и для опций выпадающих списков (select). Чтобы получить…

Ответить