`minmax()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2017 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die minmax()-Funktion in CSS 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

grid-template-columns: minmax(20px, auto) 1fr 1fr;

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

grid-template-columns: minmax(2ch, 10ch) 1fr 1fr;

<section class="default-example" id="default-example">
 <div class="example-container">
 <div class="transition-all" id="example-element">
 <div>One. This column has more text in it.</div>
 <div>Two</div>
 <div>Three</div>
 <div>Four</div>
 <div>Five</div>
 </div>
 </div>
</section>

#example-element {
 border: 1px solid #c5c5c5;
 display: grid;
 grid-gap: 10px;
 width: 250px;
}
#example-element > div {
 background-color: rgb(0 0 255 / 0.2);
 border: 3px solid blue;
 text-align: left;
}

Syntax

css

/* <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, akzeptiert.

Jeder Parameter kann eine <length>, ein <percentage> oder einer der Schlüsselwortwerte max-content, min-content oder auto sein.

Der zweite Parameter max akzeptiert auch <flex>-Werte. (Diese fr-Einheiten können nur für max verwendet werden und sind für min ungültig.)

Wenn max < min ist, wird max ignoriert und minmax(min,max) wird als min behandelt.

Werte

<length>: Eine nicht-negative Länge.
<percentage>: Ein nicht-negativer Prozentsatz relativ zur Inline-Größe des Grid-Containers in Spaltengrids und der Blockgröße des Grid-Containers in Reihengrids. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, muss das <percentage> als auto 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 Mindestbetrag erhöhen, der erforderlich ist, um den Prozentsatz zu erfüllen.
<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 Raums proportional 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 minimale Größe (wie durch min-width/min-height angegeben) der Grid-Elemente, die den Grid-Track belegen. Als max ist es identisch mit max-content. Anders als max-content erlaubt es jedoch die Erweiterung des Tracks durch die Werte der Eigenschaften align-content und justify-content wie normal und stretch.

Formale Syntax

<minmax()> = 
 minmax( min , max )

#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

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>