Тип CSS `<flex>`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с октября 2017 года.

<flex> — это CSS тип данных, обозначающий гибкую длину внутри контейнера сетки. Он используется в свойствах grid-template-columns, grid-template-rows и других связанных свойствах.

Синтаксис

Тип данных <flex> задаётся как <number>, за которым следует единица измерения fr. Единица измерения fr обозначает долю свободного пространства в контейнере сетки. Как и в случае со всеми размерами CSS, между единицей измерения и числом не ставится пробел.

Примеры

Примеры допустимых значений типа данных fr

1fr    /* Using an integer value */
2.5fr  /* Using a float value */

Пример использования в списке дорожек макета CSS-сетки

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}

Спецификации

Спецификация
Модуль макета CSS-сетки уровня 2 # fr-unit

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`flex`	29	12	40	28	10.1	29	40	28	10.3	2.0	57	10.3

См. также

Макет CSS-сетки

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/flex_value