minmax()
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.
Die minmax()
CSS-Funktion definiert einen Größenbereich, der größer oder gleich min und kleiner oder gleich max ist. Sie wird mit CSS-Grids verwendet.
Probieren Sie es aus
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)
Eine Funktion, die zwei Parameter, min und max, übernimmt.
Jeder Parameter kann eine <length>
, ein <percentage>
, ein <flex>
-Wert oder einer der Schlüsselwortwerte max-content
, min-content
oder auto
sein.
Wenn max < min ist, wird max ignoriert und minmax(min,max)
wird als min behandelt. Als Maximum legt ein <flex>
-Wert den Flex-Faktor eines Grid-Tracks fest; es ist als Minimum ungültig.
Werte
<length>
-
Eine nicht-negative Länge.
<percentage>
-
Ein nicht-negativer Prozentsatz relativ zur Inlinegröße des Grid-Containers in Spaltengrids und zur Blockgröße des Grid-Containers in Zeilengrids. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, muss das
<percentage>
alsauto
behandelt werden. Der User-Agent kann die intrinsischen Größenbeiträge des Tracks an die Größe des Grid-Containers anpassen und die endgültige Größe des Tracks um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz zu berücksichtigen. <flex>
-
Eine nicht-negative Dimension mit der Einheit
fr
, die den Flex-Faktor des Tracks angibt. Jeder<flex>
-große Track nimmt einen Anteil des verbleibenden Platzes im Verhältnis zu seinem Flex-Faktor ein. max-content
-
Repräsentiert den größten max-content-Beitrag der Grid-Elemente, die den Grid-Track belegen.
min-content
-
Repräsentiert den größten min-content-Beitrag der Grid-Elemente, die den Grid-Track belegen.
auto
-
Als
min
repräsentiert es die größte Mindestgröße (wie durchmin-width
/min-height
spezifiziert) der Grid-Elemente, die den Grid-Track belegen. Alsmax
ist es identisch mitmax-content
. Im Gegensatz zumax-content
ermöglicht es jedoch die Erweiterung des Tracks durch diealign-content
- undjustify-content
-Eigenschaftswerte wienormal
undstretch
.
Formale Syntax
<minmax()> =
minmax( min , max )
CSS-Eigenschaften
Die minmax()
-Funktion kann innerhalb verwendet werden:
Beispiele
CSS
#container {
display: grid;
grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
HTML
<div id="container">
<div>Item as wide as the content, but at most 300 pixels.</div>
<div>Item with flexible width but a minimum of 200 pixels.</div>
<div>Inflexible item of 150 pixels width.</div>
</div>
Ergebnis
Spezifikationen
Specification |
---|
CSS Grid Layout Module Level 2 # funcdef-grid-template-columns-minmax |
Browser-Kompatibilität
BCD tables only load in the browser