CSS flex — синтаксис и примеры
CSS-свойство flex: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Назначение и границы
Практический смысл «flex» связан с тем, чтобы распределять свободное место и выравнивать элементы внутри контейнера. Сокращённо задаёт рост, сжатие и базовый размер flex-элемента. Контрольная проверка «flex» проходит в интерфейсе с направлением письма справа налево, а наблюдаемой точкой служит порядок фокуса в дереве доступности.
Рабочий критерий для «flex»: разберите flex-grow, flex-shrink и flex-basis по отдельности. Если результат «flex» меняется вместе с посторонним условием, пример ещё не изолирован.
Синтаксис flex
Синтаксис «flex» показан на минимальном фрагменте без внешнего фреймворка. Сначала запустите исходный вариант, затем меняйте отмеченную часть.
.demo {
flex: 1 1 16rem;
}Как работает flex
Механика «flex» начинается с допустимого контекста и заканчивается наблюдаемым результатом. Сокращённо задаёт рост, сжатие и базовый размер flex-элемента; для «flex» отдельно проверьте порядок фокуса в дереве доступности.
Проверка в проекте
- Разберите flex-grow, flex-shrink и flex-basis по отдельности; результат относится непосредственно к «flex».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «flex».
- Проверьте «flex» в интерфейсе с направлением письма справа налево через порядок фокуса в дереве доступности и запишите наблюдаемое изменение.
Используйте «flex», когда требуется распределять свободное место и выравнивать элементы внутри контейнера; подтвердите выбор предметной проверкой: разберите flex-grow, flex-shrink и flex-basis по отдельности. Для «flex» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с flex
Соберите «flex» на небольшом макете и проверьте предметное условие: разберите flex-grow, flex-shrink и flex-basis по отдельности. Затем для «flex» замените содержимое длинным и сузьте контейнер до 320 px.
Сценарий: в интерфейсе с направлением письма справа налево.
Ошибки при работе с flex
Доступность
Flex: 1 меняет базовый размер и не всегда равнозначен одному flex-grow — это предметный риск для «flex».
Каскад
Дублирование интерактивной роли без нативного управления при использовании «flex».
Поддержка
Непредсказуемое наследование значения из внешнего компонента; для «flex» проверьте это отдельно.
Поддержка flex
Для «flex» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «flex»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о flex
Как понять, что «flex» выбрано правильно?
«flex» выбрано правильно, когда оно решает задачу «распределять свободное место и выравнивать элементы внутри контейнера», сохраняет результат в интерфейсе с направлением письма справа налево и проходит предметную проверку: разберите flex-grow, flex-shrink и flex-basis по отдельности.
Нужен ли запасной вариант для «flex»?
Запасной вариант для «flex» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «flex» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.