Мак-инлине-сизе - ЦСС-трикови

max-inline-sizeје логично својство у ЦСС-у које дефинише максималну ширину елемента када writing-modeје хоризонтално или максималну висину елемента када writing-modeје вертикално.

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

Као што сте могли да претпоставите из горњег примера, writing-modeсвојство мења оријентацију текста и тока изгледа за 90 степени.

Главни разлог за промену оријентације, осим стварања отменог дизајна, јесте прилагођавање интернационализације на локацији. Многа источноазијска писма попут кинеске, јапанске и корејске могу се писати хоризонтално или вертикално. Користећи логичка својства, можемо да пружимо тачан смер величине елемената на основу корисничког начина писања.

Јен Симмонс има чланак и презентацију који улазе дубље у ЦСС начине писања.

Зар не можемо само да користимо `max-width`имање?

Да! Али ако не подржавате Интернет Екплорер, нема разлога да га не користите max-inline-size. max-widthје физичка димензија, па када се начин писања промени, елемент задржава своју хоризонталну величину ширине, прекидајући распоред када је постављен да буде вертикалан. Логичка својства, на пример max-inline-size, могу да одговоре на те промене и примене величину у правилној оријентацији.

Синтакса

max-inline-size: ;

Иницијал: auto
Односи се на: исто као heightиwidth
Наследио: не
Проценти: као за одговарајуће физичко својство
Израчуната вредност: исто као heightиwidth
Тип анимације: према израчунатој врсти вредности

Вредности

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

Демо

Када writing-modeје постављено на vertical-rl, садржај ће се ротирати, мењајући изглед. Ширина max-widthоквира ће се ротирати са садржајем. Али max-inline-sizeје паметно! Ширину оставља у такту, без обзира на writing-modeвредност. Укључите writing-modeу следећу демонстрацију да бисте видели разлику између њих две.