Max-inline-koko - CSS-temppuja | CSS-almanakka 2025

max-inline-sizeon looginen ominaisuus CSS: ssä, joka määrittää elementin enimmäisleveyden, kun writing-modevaaka on, tai elementin enimmäiskorkeuden, kun se writing-modeon pystysuora.

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

Kuten yllä olevasta esimerkistä saatat arvata, writing-modeominaisuus muuttaa tekstin suuntaa ja asetteluvirtaa 90 astetta.

Tärkein syy suuntautumisen muuttamiseen, lukuun ottamatta hienojen mallien luomista, on mukautua kansainvälistymiseen sivustolla. Monet Itä-Aasian skriptit, kuten kiina, japani ja korea, voidaan kirjoittaa vaaka- tai pystysuunnassa. Loogisten ominaisuuksien avulla voimme tarjota elementtien oikean koon suunnan käyttäjän kirjoitustilan perusteella.

Jen Simmonsilla on artikkeli ja esitys, joka menee syvemmälle CSS-kirjoitustiloihin.

Emmekö voi vain käyttää `max-width`omaisuutta?

Joo! Mutta jos et tue Internet Exploreria, ei ole syytä olla käyttämättä max-inline-sizesen sijaan. max-widthon fyysinen ulottuvuus, joten kun kirjoitustila muuttuu, elementti pitää vaakasuoran leveytensä ja rikkoo asettelun pystysuunnassa. Loogiset ominaisuudet, kuten max-inline-size, voivat vastata näihin muutoksiin ja soveltaa kokoa oikeaan suuntaan.

Syntaksi

max-inline-size: ;

Varhainen: auto
Koskee seuraavia: sama kuin heightjawidth
Peritty: ei
Prosenttiosuudet: kuten vastaavan fyysisen omaisuuden kohdalla
Laskettu arvo: sama kuin heightjawidth
Animaatiotyyppi: lasketun arvotyypin mukaan

Arvot

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

Kun asetukseksi writing-modeon valittu vertical-rl, sisältö kiertää muuttamalla asettelua. max-widthLaatikon leveys kiertää sisällön mukana. Mutta max-inline-sizeon fiksu! Se jättää leveytensä tahdikkuuteen writing-modearvosta riippumatta . Vaihda writing-modeseuraavassa esittelyssä nähdäksesi näiden kahden välisen eron.