<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