<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>
angegeben, gefolgt von der Einheit fr
. Die fr
-Einheit repräsentiert einen Bruchteil des verbleibenden Platzes im Grid-Container. Wie bei allen CSS-Dimensionen gibt es keinen Leerraum 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-Grid-Layout
.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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<flex> |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support