<flex>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
Der <flex>
CSS Datentyp bezeichnet eine flexible Länge innerhalb eines Grid-Containers. Er wird in grid-template-columns
, grid-template-rows
und anderen verwandten Eigenschaften verwendet.
Syntax
Der <flex>
Datentyp wird als <number>
gefolgt von der Einheit fr
angegeben. Die fr
-Einheit repräsentiert einen Bruchteil des verbleibenden Raums im Grid-Container. Wie bei allen CSS-Dimensionen gibt es keinen Abstand zwischen der Einheit und der Zahl.
Beispiele
Beispiele für korrekte Werte des fr-Datentyps
1fr /* Using an integer value */ 2.5fr /* Using a float value */
Beispiel für die Verwendung in einer Track-Auflistung für CSS-Grid-Layout
css
.grid {
display: grid;
grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}
Spezifikationen
Specification |
---|
CSS Grid Layout Module Level 2 # fr-unit |
Browser-Kompatibilität
BCD tables only load in the browser