CSS minmax()-Funktion
Beispiel
Legen Sie die minimalen und maximalen Abmessungen für ein Element fest:
#container {
display: grid;
grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8CC6FF;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Selbst ausprobieren »
Definition und Verwendung
Die Funktion minmax() definiert ein geschlossenes Intervall für den Längen- und Breitenbereich, das zusammen mit dem CSSGrid-Layoutverwendet wird.
Unterstützte Version: CSS3
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversionsnummer an, die diese Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| var() | 57.0 | 16.0 | 76.0 | 10.1 | 44.0 |
CSS-Syntax
/* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) /* <fixed-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-breadth>, <fixed-breadth> values */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px)
| Wert | Beschreibung |
|---|---|
| length | Nichtnegative Länge. |
| percentage | Ein nichtnegativer Prozentsatz relativ zur Inline-Größe des Grid-Containers in Spalten-Grid-Tracks und zur Block-Größe des Grid-Containers in Zeilen-Grid-Tracks. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, muss der Prozentsatz als auto behandelt werden. Der Benutzeragent (User-Agent) kann den intrinsischen Größenbeitrag des Tracks zur Größe des Grid-Containers anpassen und dabei die endgültige Größe des Tracks auf den minimal erforderlichen Betrag erhöhen, um den Prozentsatz zu erfüllen. |
| flex | Eine nichtnegative Größe mit der Einheit fr gibt den Flex-Faktor des Tracks an. Jeder mit flex dimensionierte Track verteilt den verbleibenden Platz proportional gemäß seinem Flex-Faktor. |
| max-content | Gibt an, dass sich die Länge des Grid-Tracks an die Zelle mit dem größten Inhalt anpasst. |
| min-content | Gibt an, dass die Länge der Grid-Spur sich an die Zelle mit dem kleinsten Inhalt anpasst. |
| auto | Als Maximum entspricht es max-content. Als Minimum stellt es das Maximum der Mindestgrößen der Grid-Elemente dar, die die Grid-Spur belegen (wie durch min-width/min-height angegeben). |
Weitere Erweiterungen