CSS max-inline-size Eigenschaft

Definition und Verwendung

max-inline-size Eigenschaft spezifiziert die maximale inline-Größe des Elements.

Wird die Größe des Inhalts in der inline-Direktion kleiner als die maximale Größe, dann max-inline-size Eigenschaftswerte sind nicht wirksam.

Wird die Größe des Inhalts in der inline-Direktion größer als die maximale Größe, wird max-inline-size Eigenschaftswerte.

Hinweis:Verwandte CSS-Eigenschaften writing-mode Definiert die inline-Direktion, was die folgenden Eigenschaften beeinflusst: max-inline-size Ergebnis der Eigenschaft. Für englische Seiten ist die Blockrichtung nach unten und die inline-Direktion von links nach rechts.

CSS max-inline-size Eigenschaft und CSS-Eigenschaft max-height und max-width Sehr ähnlich, aber max-inline-size Die Eigenschaft hängt von der inline-Direktion ab.

Beispiel

Beispiel

Beispiel 1

div {
  max-inline-size: 60px;
}

Probieren Sie es selbst aus

Beispiel 2: Schreibmodus

Setzen Sie die maximale inline-Größe des <div>-Elements auf 60 Pixel: writing-mode Wenn die Eigenschaftswerte auf vertical-rl gesetzt sind, ändert sich die inline-Direktion von seitlich nach nach unten, was die folgenden Eigenschaften beeinflusst: max-inline-size Wie die Eigenschaft funktioniert:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Probieren Sie es selbst aus

Beispiel 3: Max-inline-size vs Inline-size

Beobachten Sie ein <div>-Element (inline-size für 100px) und einem anderen <div>-Element (max-inline-size unterschiedliche Reaktionen bei der Änderung der Inhaltsgröße für 100px):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Probieren Sie es selbst aus

CSS-Syntax

max-inline-size: auto|length|initial|inherit;

Eigenschaftswert

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Eigenschaft vollständig unterstützt.

Verwandte Seiten

Referenz:CSS inline-size Eigenschaft

Referenz:CSS min-inline-size Eigenschaft

Referenz:CSS max-height Eigenschaft

Referenz:CSS max-width Eigenschaft

Referenz:CSS writing-mode Eigenschaft