CSS max-inline-size egenskap

Föregående sida max-height
Nästa sida max-width

Kursrekommendation:

max-inline-size Definition och användning

Egenskapen specificerar det maximala storleken på elementet i inre riktningen. max-inline-size Om innehållet är mindre än det maximala storleken i inre riktningen,

Egenskapsvärdet spelar ingen roll. max-inline-size Om innehållet är större än det maximala storleken i inre riktningen, tillämpas

Egenskapsvärden.Observera: writing-mode Relaterade CSS-egenskaper max-inline-size Definierar inre riktning, vilket påverkar

egenskapens resultat. För engelska sidor är blockriktningen neråt och inre riktningen är från vänster till höger. max-inline-size CSS max-height egenskapen jämfört med CSS-egenskapen max-width och max-inline-size Mycket lik, men

Egenskapen är beroende av inre riktning.

Exempel

Exempel 1

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

Prova själv

Exempel 2: Skrivningsmodell

Sätt storleken på inre riktningen på <div>-elementet till 60 pixlar: writing-mode När egenskapsvärdet är satt till vertical-rl, ändras inre riktningen från sidled till neråt, vilket påverkar max-inline-size Sättet att arbeta med egenskapen är:

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

Prova själv

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

Observera ett <div>-element (inline-size för 100px) och en annan <div>-element (max-inline-size Följande reaktioner vid förändring av innehållsstorlek för 100px):

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standard. Elementets standard max-inline-size-värde.
length	Använd enheter som px, pt, cm, etc. Se vidare:CSS enheter.
%	Specificera en procentsats av storleken på motsvarande axel i föräldrelementet.
initial	Sätt detta egenskap till dess standardvärde. Se vidare: initial.
inherit	Följande är att arbeta in från föräldrelementet. Se vidare: inherit.

Tekniska detaljer

Standardvärde:	auto
Arv:	Nej
Animeringsproduktion:	Stöds. Se vidare:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.maxInlineSize="60px"