Max-inline-size - CSS-Tricks | Almanach CSS 2025

max-inline-sizeto logiczna właściwość w CSS, która określa maksymalną szerokość elementu, gdy element writing-modejest poziomy, lub maksymalną wysokość elementu, gdy element writing-modejest pionowy.

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

Jak można się domyślić na powyższym przykładzie, writing-modewłaściwość zmienia orientację tekstu i układ o 90 stopni.

Głównym powodem zmiany orientacji, oprócz tworzenia fantazyjnych projektów, jest uwzględnienie internacjonalizacji w witrynie. Wiele skryptów wschodnioazjatyckich, takich jak chiński, japoński i koreański, można pisać poziomo lub pionowo. Korzystając z właściwości logicznych, możemy zapewnić prawidłowy kierunek wymiarowania elementów w oparciu o tryb pisania użytkownika.

Jen Simmons ma artykuł i prezentację, które bardziej szczegółowo opisują tryby pisania CSS.

Nie możemy po prostu skorzystać z tej `max-width`nieruchomości?

Tak! Ale jeśli nie obsługujesz Internet Explorera, nie ma powodu, aby go nie używać max-inline-size. max-widthjest wymiarem fizycznym, więc gdy zmienia się tryb pisania, element zachowuje szerokość w poziomie, przerywając układ, gdy jest ustawiony jako pionowy. Logiczne właściwości, takie jak max-inline-size, mogą reagować na te zmiany i stosować rozmiar we właściwej orientacji.

Składnia

max-inline-size: ;

Inicjał: auto
Dotyczy: tak samo jak heightiwidth
Odziedziczone: nie
Procenty: jak dla odpowiedniej własności fizycznej
Wartość obliczona: taka sama jak heightiwidth
Typ animacji: według obliczonego typu wartości

Wartości

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

Próbny

Gdy writing-modejest ustawiona na vertical-rl, zawartość będzie się obracać, zmieniając układ. Szerokość max-widthpudełka będzie się obracać wraz z zawartością. Ale max-inline-sizejest mądry! Pozostawia swoją szerokość w takcie, niezależnie od writing-modewartości. Przełącz writing-modew poniższym demo, aby zobaczyć różnicę między nimi.