CSS max-inline-grootte eigenschap

Vorige pagina max-height
Volgende pagina max-width

Aanbevolen cursus:

max-inline-size Definitie en gebruik

eigenschap specificeert de maximale maat van het element in de inlijnrichting. max-inline-size Als de maat van de inhoud in de inlijnrichting kleiner is dan de maximale maat, dan

eigenschapswaarde heeft geen effect. max-inline-size Als de maat van de inhoud in de inlijnrichting groter is dan de maximale maat, wordt

eigenschapswaarden.Opmerking: writing-mode gerelateerde CSS-eigenschappen max-inline-size Definieert de inlijnrichting, wat invloed heeft op

resultaat van de eigenschappen. Voor Engelse pagina's is de blokrichting naar beneden en de inlijnrichting van links naar rechts. max-inline-size CSS max-height eigenschappen en CSS-eigenschappen max-width en max-inline-size Zeer vergelijkbaar, maar

Eigenschap is afhankelijk van de inlijnrichting.

Voorbeeld

Voorbeeld 1

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

Probeer het zelf

Voorbeeld 2: Schrijfmodus

Stel de maximale maat van het <div>-element in op de richting van de inlijn in op 60 pixels: writing-mode Wanneer de eigenschapwaarde vertical-rl is ingesteld, verandert de inlijnrichting van horizontaal naar naar beneden, wat invloed heeft op max-inline-size Hoe de eigenschap werkt:

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

Probeer het zelf

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

Bekijk een <div>-element (inline-size 100px) en een ander <div>-element (max-inline-size verschillende reacties bij verandering van de inhoudsmaat (100px):

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

Probeer het zelf

CSS-syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaard. De standaardwaarde van max-inline-size voor het element.
length	Gebruik eenheid zoals px, pt, cm, enz. Raadpleeg:CSS Eenheid.
%	Specificeer het percentage van de maat in de richting van de as ten opzichte van de ouderlijke element.
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap overneemt van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritschappen:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript-syntaxis:	object.style.maxInlineSize="60px"