CSS/Wertetypen/Funktionen/minmax

Aus SELFHTML-Wiki
< CSS‎ | Wertetypen‎ | Funktionen(Weitergeleitet von Minmax())
Wechseln zu: Navigation, Suche

Die minmax()-Funktion ist eine CSS-Funktion, die einen Größenbereich definiert, der größer gleich eines (gegebenen) Minimalwerts und kleiner gleich eines Maximalwerts ist. Die Funktion wird in den CSS Grid Eigenschaften grid-auto-columns, grid-auto-rows, grid-template-columns und grid-template-rows verwendet.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Syntax

minmax( min, max )

Die beiden Werte können aus folgenden Werten und Schlüsselwörtern bestehen:

  • nicht-negative Längenangabe oder nicht-negativer Prozentwert
  • <flex>: flexibler Bruchteil des Gesamtraums, ausgedrückt mit der Einheit fr
  • max-content: zeigt den größten max-content Inhaltsbeitrag aller Rasterelemente an
  • min-content: zeigt den größten min-content Inhaltsbeitrag aller Rasterelemente an
  • auto: entspricht im Maximum max-content - als Minimum wird die größte Minimalgröße (as specified by min-width/min-height) der Rasterelemente verwendet

Anwendungsbeispiele[Bearbeiten]

Grundprinzip[Bearbeiten]

Textblöcke automatisch anordnen[Bearbeiten]

Die Erklärung der Menschenrechte besteht aus 30 gleichberechtigten Artikeln. Sie sollten in Blöcken nebeneinander stehen, wenn die Viewportbreite dies zulässt. Die Größe der Blöcke wird aber nur durch den Inhalt bestimmt.

Beispiel: flexibles Grid Layout ohne media queries ansehen …
main {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  color: black;
  font: 1em/1.3 Cambria, serif;
}

main > section {
  padding: 1rem;
  background: hsl(220, 80%, 90%);
}
Für die 30 section-Blöcke werden mit grid-template-columns Spalten erzeugt. Dabei werden mit der repeat()-Funktion über das autofill-Schlüsselwort so oft wie nötig Spalten mit einer durch die minmax(20em, 1fr)-Funktion ermittelten Breite von mindestens 20em Breite und maximal einem Bruchteil erzeugt.

Weblinks[Bearbeiten]