Max-inline-size - CSS-Tricks | CSS-Almanach 2025

max-inline-sizeist eine logische Eigenschaft in CSS, die die maximale Breite eines Elements definiert, wenn writing-modees horizontal ist, oder die maximale Höhe des Elements, wenn das writing-modevertikal ist.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Wie Sie vielleicht anhand des obigen Beispiels erraten haben, writing-modeändert die Eigenschaft die Ausrichtung des Text- und Layoutflusses um 90 Grad.

Der Hauptgrund für die Änderung der Ausrichtung ist neben der Erstellung ausgefallener Designs die Anpassung an die Internationalisierung eines Standorts. Viele ostasiatische Skripte wie Chinesisch, Japanisch und Koreanisch können horizontal oder vertikal geschrieben werden. Mithilfe logischer Eigenschaften können wir die richtige Größenrichtung von Elementen basierend auf dem Schreibmodus des Benutzers angeben.

Jen Simmons hat einen Artikel und eine Präsentation, die sich eingehender mit CSS-Schreibmodi befassen.

Können wir die `max-width`Immobilie nicht einfach nutzen ?

Ja! Wenn Sie Internet Explorer jedoch nicht unterstützen, gibt es keinen Grund, ihn nicht zu verwenden max-inline-size. max-widthist eine physikalische Dimension. Wenn sich also der Schreibmodus ändert, behält ein Element seine horizontale Breite bei und bricht ein Layout, wenn es vertikal eingerichtet ist. Logische Eigenschaften max-inline-sizekönnen auf diese Änderungen reagieren und die Größe in der richtigen Ausrichtung anwenden.

Syntax

max-inline-size: ;

Initiale: auto
Gilt für: wie heightundwidth
Geerbt: nein
Prozentsätze: wie für die entsprechende physikalische Eigenschaft
Berechneter Wert: wie heightundwidth
Animationstyp: nach berechnetem Werttyp

Werte

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Demo

Wenn das auf eingestellt writing-modeist vertical-rl, dreht sich der Inhalt und ändert das Layout. Die Breite des max-widthFeldes dreht sich mit dem Inhalt. Ist max-inline-sizeaber schlau! Es lässt seine Breite im Takt, unabhängig vom writing-modeWert. Schalten Sie writing-modein der folgenden Demo um, um den Unterschied zwischen den beiden zu sehen.