Max-inline-storlek - CSS-tricks

max-inline-sizeär en logisk egenskap i CSS som definierar den maximala bredden på ett element när det writing-modeär horisontellt, eller den maximala höjden på elementet när det writing-modeär vertikalt.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Som du kanske har gissat av exemplet ovan writing-modeändrar egenskapen orienteringen av texten och layoutflödet med 90 grader.

Den främsta anledningen till att ändra orienteringen, förutom att skapa snygga mönster, är att tillgodose internationalisering på en webbplats. Många östasiatiska manus som kinesiska, japanska och koreanska kan skrivas horisontellt eller vertikalt. Med hjälp av logiska egenskaper kan vi tillhandahålla rätt storleksriktning för element baserat på användarens skrivläge.

Jen Simmons har en artikel och presentation som går djupare in i CSS-skrivlägen.

Kan vi inte bara använda `max-width`fastigheten?

ja! Men om du inte stöder Internet Explorer finns det ingen anledning att inte använda max-inline-sizeistället. max-widthär en fysisk dimension, så när skrivläget ändras behåller ett element sin horisontella breddstorlek och bryter en layout när den är inställd att vara vertikal. Logiska egenskaper, som max-inline-size, kan svara på dessa förändringar och tillämpa storleken i rätt riktning.

Syntax

max-inline-size: ;

Första: auto
Gäller för: samma som heightochwidth
Ärvt: nej
Procentandelar: för motsvarande fysiska egendom
Beräknat värde: samma som heightochwidth
Animationstyp: efter beräknad värdetyp

Värden

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Demo

När den writing-modeär inställd på vertical-rlroterar innehållet och ändrar layouten. Lådans bredd max-widthkommer att rotera med innehållet. Men max-inline-sizeär smart! Det lämnar sin bredd i takt, oavsett writing-modevärde. Växla writing-modei följande demo för att se skillnaden mellan de två.