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
Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet…
Есть много разных способов анимировать SVG-изображения. Сейчас я рассмотрю и сделаю себе пометки, как сделать…
Пример кроссбраузерного варианта сделать картинку черно-белой с помощью CSS. IE11 не поддерживает filter. Make an…
Селектор :checked работает для чекбоксов, радио кнопок и для опций выпадающих списков (select). Чтобы получить…