<flex>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2017.
Der <flex> CSS Datentyp bezeichnet eine flexible Länge innerhalb eines Rastercontainers. 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 Rastercontainer. Wie bei allen CSS-Maßen 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 Spurauflistung für ein CSS-Rasterlayout
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
Loading…