Max-inline-size - CSS-triki | CSS almanahs 2025

max-inline-sizeir loģisks rekvizīts CSS, kas nosaka elementa maksimālo platumu, kad tas writing-modeir horizontāls, vai maksimālo elementa augstumu, ja tas writing-modeir vertikāls.

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

Kā jūs, iespējams, nojautāt pēc iepriekš minētā piemēra, writing-moderekvizīts maina teksta orientāciju un izkārtojuma plūsmu par 90 grādiem.

Galvenais iemesls, kāpēc mainīt orientāciju, ne tikai izdomātu dizainu radīšana, ir pielāgoties vietnei internacionalizācijai. Daudzus Austrumāzijas rakstus, piemēram, ķīniešu, japāņu un korejiešu, var rakstīt horizontāli vai vertikāli. Izmantojot loģiskās īpašības, mēs varam nodrošināt pareizu elementu lieluma virzienu, pamatojoties uz lietotāja rakstīšanas režīmu.

Jen Simmons ir raksts un prezentācija, kas iedziļinās CSS rakstīšanas režīmos.

Vai mēs nevaram vienkārši izmantot `max-width`īpašumu?

Jā! Bet, ja neatbalstāt Internet Explorer, nav iemesla to neizmantot max-inline-size. max-widthir fiziska dimensija, tādēļ, mainoties rakstīšanas režīmam, elements saglabā horizontālo platuma lielumu, sadalot izkārtojumu, kad tas ir iestatīts kā vertikāls. Loģiskās īpašības, piemēram max-inline-size, var reaģēt uz šīm izmaiņām un piemērot izmēru pareizajā orientācijā.

Sintakse

max-inline-size: ;

Sākotnējais: auto
Attiecas uz: tāds pats kā heightunwidth
Mantots: nē
Procenti: tāpat kā attiecīgajam fiziskajam īpašumam
Aprēķinātā vērtība: tāda pati kā heightunwidth
Animācijas tips: pēc aprēķinātās vērtības veida

Vērtības

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

Demonstrācija

Kad vērtība writing-modeir iestatīta uz vertical-rl, saturs tiks pagriezts, mainot izkārtojumu. max-widthKastes platums mainīsies līdz ar saturu. Bet max-inline-sizeir gudrs! Tas atstāj savu platumu taktī, neatkarīgi no writing-modevērtības. Pārslēdziet šo writing-modedemonstrāciju, lai redzētu atšķirību starp abiem.