Max. inline-size - CSS-trükkök

max-inline-sizeegy logikai tulajdonság a CSS-ben, amely meghatározza az elem maximális szélességét, ha az writing-modevízszintes, vagy az elem maximális magasságát, ha az writing-modefüggőleges.

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

Amint azt a fenti példa kitalálhatta, a writing-modetulajdonság 90 fokkal megváltoztatja a szöveg és az elrendezés folyamatának orientációját.

A tájolás megváltoztatásának fő oka, a divatos tervek elkészítésén kívül, az, hogy a helyszínen nemzetközivé váljon. Sok kelet-ázsiai szkript, például kínai, japán és koreai, írható vízszintesen vagy függőlegesen. Logikai tulajdonságok felhasználásával megadhatjuk az elemek helyes méretirányát a felhasználó írási módja alapján.

Jen Simmonsnak van egy cikke és bemutatója, amely mélyebben belemerül a CSS írási módokba.

Nem használhatjuk csak az `max-width`ingatlant?

Igen! De ha nem támogatja az Internet Explorert, nincs oka annak, hogy ne használja max-inline-size. max-widthfizikai dimenzió, így amikor az írási mód megváltozik, egy elem megtartja a vízszintes szélességét, és megszakítja az elrendezést, amikor függőlegesre van állítva. A logikai tulajdonságok hasonlóan max-inline-sizereagálhatnak ezekre a változásokra, és a méretet a megfelelő tájolásban alkalmazhatják.

Szintaxis

max-inline-size: ;

A kezdeti: auto
A következőkre vonatkozik: ugyanaz, mint heightéswidth
Örökölt: nem
Százalékok: ami a megfelelő fizikai tulajdonságot illeti
Számított érték: ugyanaz, mint a heightéswidth
Animáció típusa: kiszámított értéktípus szerint

Értékek

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

Demó

Ha a értékre writing-modevan állítva vertical-rl, a tartalom el fog forogni, megváltoztatva az elrendezést. A max-widthdoboz szélessége a tartalommal együtt forog. De max-inline-sizeokos! Tapintatban hagyja szélességét, az writing-modeértéktől függetlenül . Toggle a writing-modeaz alábbi demo, hogy a különbség a kettő között.