Max-inline-size - CSS-gudrybės | CSS almanachas 2025

max-inline-sizeyra logiška CSS ypatybė, apibrėžianti maksimalų elemento plotį, kai writing-modehorizontalus, arba didžiausią elemento aukštį, kai jis writing-modeyra vertikalus.

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

Kaip jau spėjote iš aukščiau pateikto pavyzdžio, writing-modeypatybė pakeičia teksto ir išdėstymo srauto orientaciją 90 laipsnių.

Pagrindinė priežastis pakeisti orientaciją, be to, kad būtų kuriami puošnūs dizainai, yra pritaikymas internacionalizacijai svetainėje. Daugelį Rytų Azijos scenarijų, tokių kaip kinų, japonų ir korėjiečių, galima parašyti horizontaliai arba vertikaliai. Naudodamiesi loginėmis savybėmis, mes galime pateikti teisingą elementų dydžio kryptį pagal vartotojo rašymo režimą.

Jen Simmons turi straipsnį ir pristatymą, kuriame gilinamasi į CSS rašymo režimus.

Ar negalime naudotis tik `max-width`turtu?

Taip! Bet jei nepalaikote „Internet Explorer“, nėra jokios priežasties nenaudoti max-inline-size. max-widthyra fizinis matmuo, todėl pasikeitus rašymo režimui, elementas išlaiko horizontalaus pločio dydį, sulaužydamas maketą, kai jis yra vertikalus. Loginės savybės, pavyzdžiui max-inline-size, gali reaguoti į tuos pokyčius ir pritaikyti dydį tinkamai.

Sintaksė

max-inline-size: ;

Pradinis: auto
Taikoma: tas pats kaip heightirwidth
Paveldima: ne
Procentai: kaip ir atitinkamai fizinei nuosavybei
Apskaičiuota vertė: tokia pati kaip heightirwidth
Animacijos tipas: pagal apskaičiuotą vertės tipą

Vertybės

/* 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;

Demonstracija

Kai writing-modenustatyta į vertical-rl, turinys pasisuks, pakeisdamas išdėstymą. max-widthDėžutės plotis keisis kartu su turiniu. Bet max-inline-sizeyra protingas! Nepaisant writing-modevertės, jis palieka taktą . Perjunkite writing-modeį kitą demo pamatyti skirtumas tarp šių dviejų.