Max-inline-størrelse - CSS-tricks

max-inline-sizeer en logisk egenskab i CSS, der definerer den maksimale bredde af et element, når elementet writing-modeer vandret, eller elementets maksimale højde, når det writing-modeer lodret.

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

Som du måske har gættet ved eksemplet ovenfor, writing-modeændrer egenskaben orienteringen af teksten og layoutflowet med 90 grader.

Hovedårsagen til at ændre orienteringen, bortset fra at skabe smarte designs, er at imødekomme internationalisering på et websted. Mange østasiatiske scripts som kinesisk, japansk og koreansk kan skrives vandret eller lodret. Ved hjælp af logiske egenskaber kan vi give den korrekte størrelsesretning af elementer baseret på brugerens skrivemåde.

Jen Simmons har en artikel og præsentation, der går dybere ind i CSS-skrivemåder.

Kan vi ikke bare bruge `max-width`ejendommen?

Ja! Men hvis du ikke understøtter Internet Explorer, er der ingen grund til ikke at bruge i max-inline-sizestedet. max-widther en fysisk dimension, så når skrivemåden ændres, beholder et element sin vandrette bredde og bryder et layout, når det er indstillet til at være lodret. Logiske egenskaber kan f.eks max-inline-size. Reagere på disse ændringer og anvende størrelsen i den rigtige retning.

Syntaks

max-inline-size: ;

Initial: auto
Gælder for: samme som heightogwidth
Arvet: nej
Procentdele: som for den tilsvarende fysiske egenskab
Beregnet værdi: samme som heightogwidth
Animationstype: efter beregnet værditype

Værdier

/* 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 indstillingen writing-modeer indstillet til vertical-rl, vil indholdet rotere og ændre layoutet. max-widthKassens bredde roterer med indholdet. Men max-inline-sizeer smart! Det efterlader sin bredde i takt uanset writing-modeværdien. Skift writing-modei den følgende demo for at se forskellen mellem de to.