CSS flex-flow — синтаксис и примеры
CSS-свойство flex-flow: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Назначение и границы
У темы «flex-flow» есть конкретная роль в области «Flexbox и Grid». Свойство flex-flow относится к области «Flexbox и Grid» и рассчитывается совместно с размерами контейнера, содержимым и настройками соседних элементов. Для «flex-flow» в интерфейсе с направлением письма справа налево используйте изменение DOM в панели Elements и меняйте только одно условие за запуск.
Проверяя «flex-flow», соблюдайте правило: проверяйте flex-flow вместе с родительским контекстом и соседними правилами. Для «flex-flow» изменяйте одно условие за запуск и фиксируйте фактический результат.
Синтаксис flex-flow
Синтаксис «flex-flow» показан на минимальном фрагменте без внешнего фреймворка. Сначала запустите исходный вариант, затем меняйте отмеченную часть.
.demo {
flex-flow: 1rem;
}Как работает flex-flow
Браузер обрабатывает «flex-flow» в контексте области «Flexbox и Grid»: свойство flex-flow относится к области «Flexbox и Grid» и рассчитывается совместно с размерами контейнера, содержимым и настройками соседних элементов. Для «flex-flow» наблюдения через изменение DOM в панели Elements и состояние при пустом содержимом отделяют исходное условие от результата.
Проверка в проекте
- Проверьте вычисленное значение flex-flow, наследование и контекст родителя; результат относится непосредственно к «flex-flow».
- Увеличить текст до 200% и убедиться, что действия и подписи не обрезаются при разборе «flex-flow».
- Проверьте «flex-flow» в интерфейсе с направлением письма справа налево через изменение DOM в панели Elements и запишите наблюдаемое изменение.
Используйте «flex-flow», когда требуется распределять свободное место и выравнивать элементы внутри контейнера; подтвердите выбор предметной проверкой: проверьте вычисленное значение flex-flow, наследование и контекст родителя. Для «flex-flow» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с flex-flow
Соберите «flex-flow» на небольшом макете и проверьте предметное условие: проверьте вычисленное значение flex-flow, наследование и контекст родителя. Затем для «flex-flow» замените содержимое длинным и сузьте контейнер до 320 px.
Сценарий: в интерфейсе с направлением письма справа налево.
Ошибки при работе с flex-flow
Каскад
Изолированная декларация flex-flow без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «flex-flow».
Поддержка
Использование физической стороны там, где нужен логический отступ при использовании «flex-flow».
Контекст
Дублирование интерактивной роли без нативного управления; для «flex-flow» проверьте это отдельно.
Поддержка flex-flow
Для «flex-flow» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «flex-flow»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о flex-flow
Как понять, что «flex-flow» выбрано правильно?
«flex-flow» выбрано правильно, когда оно решает задачу «распределять свободное место и выравнивать элементы внутри контейнера», сохраняет результат в интерфейсе с направлением письма справа налево и проходит предметную проверку: проверьте вычисленное значение flex-flow, наследование и контекст родителя.
Нужен ли запасной вариант для «flex-flow»?
Запасной вариант для «flex-flow» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «flex-flow» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.