<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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<flex>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch