Maximálna vložená veľkosť - Triky CSS

max-inline-sizeje logická vlastnosť v CSS, ktorá definuje maximálnu šírku prvku, keď writing-modeje vodorovná čiara, alebo maximálnu výšku prvku, keď writing-modeje vodorovná čiara.

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

Ako ste si už mohli všimnúť v príklade vyššie, writing-modevlastnosť zmení orientáciu toku textu a rozloženia o 90 stupňov.

Hlavným dôvodom na zmenu orientácie, okrem vytvárania efektných návrhov, je prispôsobenie sa internacionalizácii na danom mieste. Mnoho východoázijských skriptov, ako napríklad čínština, japončina a kórejčina, je možné písať horizontálne alebo vertikálne. Pomocou logických vlastností môžeme zabezpečiť správny smer veľkosti prvkov na základe režimu písania používateľom.

Jen Simmons má článok a prezentáciu, ktoré idú hlbšie do režimov písania CSS.

Nemôžeme `max-width`nehnuteľnosť len tak využívať ?

Áno! Ak ale nepodporujete program Internet Explorer, nie je dôvod, aby ste ho max-inline-sizeradšej nepoužívali . max-widthje fyzická dimenzia, takže keď sa zmení režim písania, prvok si zachová svoju veľkosť vodorovnej šírky a rozbije rozloženie, keď je nastavený na zvislú polohu. Logické vlastnosti, ako napríklad max-inline-size, môžu na tieto zmeny reagovať a použiť veľkosť v správnej orientácii.

Syntax

max-inline-size: ;

Počiatočné: auto
Platí pre: rovnaké ako heightawidth
Zdedené: č
Percentá: pokiaľ ide o zodpovedajúce fyzické vlastnosti
Vypočítaná hodnota: rovnaká ako heightawidth
Typ animácie: podľa typu vypočítanej hodnoty

Hodnoty

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

Ukážka

Keď writing-modeje položka nastavená na vertical-rl, obsah sa bude otáčať, čím sa zmení rozloženie. Šírka max-widthpoľa sa bude otáčať s obsahom. Ale max-inline-sizeje chytrý! Svoju šírku necháva v takte, bez ohľadu na writing-modehodnotu. writing-modeV nasledujúcej ukážke prepnite prepínač, aby ste videli rozdiel medzi nimi.