Max-inline-maat - CSS-trucs | CSS Almanac 2025

max-inline-sizeis een logische eigenschap in CSS die de maximale breedte van een element definieert wanneer de writing-modehorizontaal is, of de maximale hoogte van het element wanneer de writing-modeverticaal is.

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

Zoals je misschien al hebt geraden door het bovenstaande voorbeeld, writing-modeverandert de eigenschap de oriëntatie van de tekst en de lay-outstroom met 90 graden.

De belangrijkste reden om de oriëntatie te veranderen, naast het maken van mooie ontwerpen, is om internationalisering op een site mogelijk te maken. Veel Oost-Aziatische scripts, zoals Chinees, Japans en Koreaans, kunnen horizontaal of verticaal worden geschreven. Met behulp van logische eigenschappen kunnen we de juiste maatrichting van elementen geven op basis van de schrijfmodus van de gebruiker.

Jen Simmons heeft een artikel en presentatie die dieper ingaan op CSS-schrijfmodi.

Kunnen we het `max-width`pand niet gewoon gebruiken ?

Ja! Maar als u Internet Explorer niet ondersteunt, is er geen reden om het niet te gebruiken max-inline-size. max-widthis een fysieke dimensie, dus wanneer de schrijfmodus verandert, behoudt een element zijn horizontale breedte, waardoor een lay-out wordt verbroken wanneer het verticaal is ingesteld. Logische eigenschappen, zoals max-inline-size, kunnen op die veranderingen reageren en de grootte in de juiste richting toepassen.

Syntaxis

max-inline-size: ;

Eerste: auto
Geldt voor: hetzelfde als heightenwidth
Overgenomen: nee
Percentages: zoals voor de bijbehorende fysieke eigenschap
Berekende waarde: hetzelfde als heightenwidth
Animatietype: op type berekende waarde

Waarden

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

Als writing-modeis ingesteld op vertical-rl, zal de inhoud roteren, waardoor de lay-out verandert. De breedte van de max-widthdoos draait mee met de inhoud. Maar max-inline-sizeis slim! Het laat zijn breedte intact, ongeacht de writing-modewaarde. Schakel writing-modein de volgende demo om het verschil tussen de twee te zien.