`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.

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>