CSS Min- und Max-Werte

Mit den min- und max-Eigenschaften können wir die Größe von Elementen begrenzen. So stellen wir sicher, dass ein Element weder zu klein noch zu groß wird, auch wenn sich die Größe des Elterncontainers ändert.

Verfügbare Eigenschaften

Die Einstellungen min-width, max-width, min-height und max-height ermöglichen eine Feinabstimmung des Layouts. Sie werden häufig im responsiven Design verwendet.

Eigenschaft	Beschreibung
min-width	Legt die minimale Breite fest, unter die das Element nicht gehen darf.
max-width	Legt die maximale Breite fest, über die das Element nicht wachsen darf.
min-height	Legt die minimale Höhe fest, unter die das Element nicht gehen darf.
max-height	Legt die maximale Höhe fest, über die das Element nicht wachsen darf.

Beispiel mit festen Begrenzungen

Im folgenden Beispiel hat die Box minimale und maximale Breiten und Höhen.

Die rote Box kann zwischen 200 und 400 Pixel breit und zwischen 100 und 200 Pixel hoch sein.

Responsive Verwendung

In Kombination mit Prozentbreiten sind min- und max-Werte ideal für responsive Layouts.

Tipps zur Verwendung von min und max

Die Eigenschaften min und max verhindern extremes Schrumpfen oder Ausdehnen von Elementen.

Verwende min-width auf Mobilgeräten, damit Texte nicht in zu schmale Spalten fallen.
Mit max-width bleibt der Inhalt auch auf großen Bildschirmen gut lesbar.
Kombiniere min- und max-Werte mit Prozentbreiten für ein perfektes responsives Ergebnis.