Maks-inline-størrelse - CSS-triks

max-inline-sizeer en logisk egenskap i CSS som definerer den maksimale bredden på et element når det writing-modeer vannrett, eller den maksimale høyden på elementet når det writing-modeer loddrett.

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

Som du kanskje har gjettet av eksemplet ovenfor, writing-modeendrer egenskapen retningen på teksten og layoutflyten med 90 grader.

Hovedårsaken til å endre orientering, bortsett fra å skape fancy design, er å imøtekomme internasjonalisering på et nettsted. Mange østasiatiske skript som kinesisk, japansk og koreansk kan skrives horisontalt eller vertikalt. Ved hjelp av logiske egenskaper kan vi gi den riktige størrelsesretningen for elementer basert på brukerens skrivemodus.

Jen Simmons har en artikkel og presentasjon som går dypere inn i CSS-skrivemodus.

Kan vi ikke bare bruke `max-width`eiendommen?

Ja! Men hvis du ikke støtter Internet Explorer, er det ingen grunn til ikke å bruke i max-inline-sizestedet. max-widther en fysisk dimensjon, så når skrivemodusen endres, beholder et element sin horisontale bredde og bryter et layout når det er satt opp til å være vertikalt. Som logiske egenskaper max-inline-sizekan de svare på disse endringene og bruke størrelsen i riktig retning.

Syntaks

max-inline-size: ;

Første: auto
Gjelder for: samme som heightogwidth
Arvet: nei
Prosentandel: som for den tilsvarende fysiske egenskapen
Beregnet verdi: samme som heightogwidth
Animasjonstype: etter beregnet verditype

Verdier

/* 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 dette writing-modeer satt til vertical-rl, vil innholdet rotere og endre oppsettet. Bredden på max-widthboksen vil rotere med innholdet. Men max-inline-sizeer smart! Den etterlater bredden i takt, uavhengig av writing-modeverdien. Bytt writing-modei følgende demo for å se forskjellen mellom de to.