CSS - max-inline-size Eigenschaft: Ein Anfängerleitfaden

Hallo da draußen, zukünftige CSS-Zauberer! Heute tauchen wir in die aufregende Welt der max-inline-size Eigenschaft ein. Keine Sorge, wenn ihr neu seid; ich werde dein freundlicher Guide durch dieses CSS-Abenteuer sein. Also, hole dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und los geht's!

Was ist max-inline-size?

Bevor wir ins Detail gehen, lassen wir uns mal anschauen, was max-inline-size eigentlich ist. Stell dir vor, du versuchst ein sehr langes Wort in eine kleine Box zu passen. Das ist ein bisschen, was max-inline-size in CSS für uns erledigt. Es setzt die maximale Größe eines Elements in die inline-Richtung.

"Aber wartet," magst du fragen, "was ist die inline-Richtung?" Tolle Frage! In Englisch und vielen anderen Sprachen ist die inline-Richtung horizontal - von links nach rechts. Allerdings ist sie in einigen Sprachen wie Arabisch oder Hebräisch von rechts nach links. Und in vertikalen Schreibmodi kann sie sogar von oben nach unten sein!

Mögliche Werte

Nun schauen wir uns die verschiedenen Werte an, die wir mit max-inline-size verwenden können. Hier ist eine praktische Tabelle für euch:

Wert	Beschreibung
<length>	Eine feste Länge wie 300px oder 20em
<percentage>	Ein Prozentsatz der Größe des umschließenden Blocks
none	Keine Begrenzung der Größe (dies ist die Voreinstellung)
max-content	Die intrinsische bevorzugte Größe
min-content	Die intrinsische minimale Größe
fit-content	Verwendet den verfügbaren Raum, aber nie weniger als min-content und nie mehr als max-content

Keine Sorge, wenn einige davon jetzt verwirrend erscheinen. Wir werden jeden einzelnen mit Beispielen erkunden!

Gültigkeit

Die max-inline-size Eigenschaft gilt für alle Elemente außer:

• Nicht-ersetzte inline-Elemente
• Tabellenzeilen
• Zeilengruppen

Syntax

Die grundlegende Syntax für max-inline-size ist ziemlich einfach:

max-inline-size: wert;

Einfach, oder? Nun tauchen wir in einige spezifische Beispiele ein!

CSS max-inline-size - Wert

Lassen wir mit einem einfachen Beispiel mit einer festen Länge beginnen:

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Dies ist eine Box mit max-inline-size auf 300px gesetzt. Der Inhalt wird umbrechen, wenn er diese Breite überschreitet.
</div>

In diesem Beispiel haben wir die max-inline-size auf 300 Pixel gesetzt. Das bedeutet, egal wie viel Inhalt wir in die .box setzen, sie wird nie breiter als 300px in die inline-Richtung (was in diesem Fall horizontal ist) werden. Wenn der Inhalt zu lang ist, wird er auf die nächste Zeile umgebrochen.

CSS max-inline-size - Wert

Nun probieren wir einen Prozentsatzwert aus:

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
Diese Box hat max-inline-size auf 50% der Breite ihres Containers gesetzt.
</div>
</div>

In diesem Fall wird die .box eine maximaleinline-Größe von 50% der Breite ihres Containers haben. Also, wenn der Container 500px breit ist, wird die Box nie breiter als 250px werden.

CSS max-inline-size - Wert

Der max-content Wert ist besonders interessant. Er setzt die maximale inline-Größe auf die bevorzugte Größe des Inhalts. Sehen wir uns das in der Praxis an:

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
Diese Box wird sich erweitern, um ihren Inhalt zu fassen, aber nur umbrechen, wenn sie dazu gezwungen wird.
</div>

Mit max-content wird die Box sich erweitern, um ihren gesamten Inhalt auf einer Zeile zu platzieren, nur umgebrochen, wenn sie gezwungen wird (wie z.B. wenn sie die Kante des Viewports erreicht).

CSS max-inline-size - Mit vertikalem Text

Nun zu etwas helt Anderem! Sehen wir uns an, wie max-inline-size mit vertikalem Text funktioniert:

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
Dieser Text ist vertikal, und max-inline-size begrenzt seine Höhe!
</div>

In diesem Beispiel haben wir writing-mode: vertical-rl verwendet, um den Text vertikal und rechts-nach-links zu machen. Jetzt begrenzt max-inline-size tatsächlich die Höhe der Box, da in vertikalem Schreibmodus die inline-Richtung vertikal ist!

Fazit

Und das war's, Leute! Wir haben die max-inline-size Eigenschaft von oben nach unten (oder sollte ich sagen, von inline-Start bis inline-Ende?) erkundet. Denke daran, CSS ist alles über das Ausprobieren. Habe keine Angst, diese Eigenschaften auszuprobieren und zu sehen, was passiert. So haben wir alle gelernt!

Bevor ich euch gehen lasse, hier ist ein kleiner Witz, um max-inline-size zu erinnern: Warum ist die CSS-Eigenschaft ins Fitnessstudio gegangen? Um an ihrem max-inline-size zu arbeiten, natürlich!

Frohes Coden und möge eure Layouts immer flexibel sein und euer Inhalt immer genau passen!

Credits: Image by storyset