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

Hallo da draußen, zukünftige CSS-Meister! Heute machen wir uns auf eine aufregende Reise in die Welt des CSS, Specifically die min-inline-size Eigenschaft erkunden. Keine Sorge, wenn du neu bist; ich werde dein freundlicher Guide sein, und wir werden dieses Thema Schritt für Schritt angehen. Am Ende dieses Tutorials wirst du diese Eigenschaft wie ein Profi einsetzen können!

Was ist min-inline-size?

Bevor wir tiefer einsteigen, lassen Sie uns verstehen, was min-inline-size eigentlich bedeutet. Stell dir vor, du packst für eine Reise und hast einen Koffer, der sich erweitern kann. Die min-inline-size ist so, als würdest du die minimale Größe für diesen Koffer in seiner Hauptdimension festlegen. In Begriffen des Webdesigns setzt es die minimale Größe eines Elements in seiner Inline-Richtung.

Nun, du fragst dich vielleicht, "Was ist eine Inline-Richtung?" Nun, in den meisten Fällen für Englisch und ähnliche Sprachen, ist es die horizontale Richtung. Aber keine Sorge, wir werden das später noch genauer erkunden!

Mögliche Werte

Schauen wir uns die verschiedenen Werte an, die wir mit min-inline-size verwenden können:

Wert	Beschreibung
<length>	Eine feste Länge, wie 100px oder 2em
<percentage>	Ein Prozentsatz der Größe des übergeordneten Containers
max-content	Die intrinsische bevorzugte Größe
min-content	Die intrinsische minimale Größe
auto	Der Browser entscheidet über die minimale Größe

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

Anwendungsbereich

Die min-inline-size Eigenschaft kann auf alle Elemente angewendet werden, außer:

• Inline, nicht-ersetzte Elemente
• Tabellenzeilen
• Zeilen groups

Syntax

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

min-inline-size: <value>;

Lassen Sie uns in einige Beispiele eintauchen, um zu sehen, wie dies in der Praxis funktioniert!

CSS min-inline-size - Wert

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

<div class="box">Dies ist ein Kasten mit min-inline-size auf 200px gesetzt.</div>

.box {
min-inline-size: 200px;
background-color: lightblue;
padding: 10px;
}

In diesem Beispiel sagen wir dem Browser: "Hallo, lass diesen Kasten auf keinen Fall schmaler als 200 Pixel werden." Wenn du das Browserfenstergröße änderst, wirst du sehen, dass der Kasten seine minimale Breite von 200px beibehält, auch wenn du versuchst, ihn kleiner zu machen.

CSS min-inline-size - Wert

Nun próbieren wir einen Prozentsatz:

<div class="container">
<div class="box">Dieser Kasten hat min-inline-size auf 50% gesetzt.</div>
</div>

.container {
width: 400px;
background-color: lightyellow;
padding: 10px;
}

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

In diesem Fall sagen wir: "Stelle sicher, dass dieser Kasten mindestens so breit ist wie die Hälfte seines übergeordneten Containers." Der Kasten wird mindestens 200px breit (50% von 400px), aber er kann größer werden, wenn nötig.

CSS min-inline-size - max-content Wert

Der max-content Wert ist besonders interessant. Er setzt die minimale Größe auf die bevorzugte Größe des Inhalts. Lassen Sie uns das in Aktion sehen:

<div class="box max-content">Dieser Kasten wird sich erweitern, um seinen Inhalt zu fassen.</div>
<div class="box fixed">Dieser Kasten hat eine feste Breite von 150px.</div>

.box {
background-color: lightpink;
padding: 10px;
margin-bottom: 10px;
}

.max-content {
min-inline-size: max-content;
}

.fixed {
width: 150px;
}

Der max-content Kasten wird sich erweitern, um seinen gesamten Inhalt auf einer Linie zu fassen, während der festbreite Kasten die Textumbruch verursachen kann.

CSS min-inline-size - Mit vertikalem Text

Nun, hier wird es wirklich interessant! Erinnern wir uns daran, dass die Inline-Richtung normalerweise horizontal ist? Nun, das ist nicht immer der Fall. Sehen wir uns ein Beispiel mit vertikalem Text an:

<div class="vertical-text">Dieser Text ist vertikal!</div>

.vertical-text {
writing-mode: vertical-rl;
min-inline-size: 100px;
background-color: lavender;
padding: 10px;
}

In diesem Fall, weil wir den writing-mode auf vertikal geändert haben, kontrolliert min-inline-size tatsächlich die minimale Höhe des Kastens, nicht die Breite!

Schlussfolgerung

Und das war's, Leute! Wir haben die min-inline-size Eigenschaft von oben nach unten (oder sollte ich sagen, von links nach rechts?) erkundet. Denken Sie daran, CSS ist alles über das Experimentieren. Hab keine Angst, diese Eigenschaften auszuprobieren und zu sehen, was passiert. Das ist, wie wir alle gelernt haben!

Bevor wir aufhören, hier ist ein schneller Tipp aus meinen Jahren des Unterrichtens: Denke immer daran, wie dein Design auf verschiedenen Bildschirmgrößen aussieht. Die min-inline-size Eigenschaft kann ein mächtiges Werkzeug sein, um responsive Designs zu erstellen, die auf allem von Smartphones bis zu Breitbildmonitoren toll aussehen.

Weiter üben, weiter erkunden und vor allem: Spaß haben mit CSS! Wer weiß? Die nächste großartige Webseitengestaltung könnte aus deinen Experimenten mit min-inline-size kommen!

Credits: Image by storyset