CSS max-inline-size egenskab

Forrige side max-height
Næste side max-width

Definition og brug

max-inline-size egenskaben specificerer elementets maksimale størrelse i den indre retning.

Hvis indholdets størrelse i den indre retning er mindre end den maksimale størrelse, max-inline-size egenskabsværdien har ingen effekt.

Hvis indholdets størrelse i den indre retning er større end den maksimale størrelse, anvendes max-inline-size egenskabsværdierne.

Bemærk:relaterede CSS-egenskaber writing-mode definerer den indre retning, hvilket påvirker max-inline-size resultatet af egenskaben. For engelske sider er blokretningen nedadgående, og den indre retning er fra venstre til højre.

CSS max-inline-size egenskab sammenlignet med CSS-egenskab max-height og max-width Meget ligner, men max-inline-size Egenskaben afhænger af den indre retning.

Eksempel

Eksempel 1

Sæt <div>-elementets maksimale indre størrelse til 60 pixel:

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

Prøv det selv

Eksempel 2: Skrivemåde

Sæt <div>-elementets writing-mode Når egenskabsværdien sættes til vertical-rl, ændres den indre retning fra lodret til nedadgående, hvilket påvirker max-inline-size Arbejdsmåde for egenskaben:

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

Prøv det selv

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

Overvåg et <div>-element (inline-size 100px) og en anden <div>-element (max-inline-size Forskellige reaktioner ved ændring af indholdets størrelse (100px):

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
auto	Standard. Elementets standard max-inline-size værdi.
length	Brug enheder som px, pt, cm osv. Se:CSS units.
%	Angiv en procentdel af størrelsen på aksen i forhold til forældrelementet.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arv denne egenskab fra forældrelementet. Se: inherit.

Tekniske detaljer

Standardværdi:	auto
Arv:	Nej
Animation fremstilling:	Understøttelse. Se:Animation relaterede egenskaber.
Version:	CSS3
JavaScript syntaks:	object.style.maxInlineSize="60px"