<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 Grid Layout Module Level 2 # fr-unit

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

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

См. также

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

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