CSS max-inline-size atrybut

Poprzednia strona max-height
Następna strona max-width

Definicja i użycie

max-inline-size Atrybut określa maksymalny rozmiar elementu w kierunku wewnętrznym.

Jeśli rozmiar zawartości w kierunku wewnętrznym jest mniejszy niż maksymalny rozmiar, to max-inline-size Wartości atrybutów nie mają wpływu.

Jeśli rozmiar zawartości w kierunku wewnętrznym jest większy niż maksymalny rozmiar, zastosuje się max-inline-size Wartości atrybutów.

Uwaga:powiązane atrybuty CSS writing-mode Definiuje kierunek wewnętrzny, co wpływa na max-inline-size Wynik atrybutów. Dla stron w języku angielskim, kierunek blokowy jest pionowy, a kierunek wewnętrzny jest z lewej na prawą.

CSS max-inline-size Atrybuty są podobne do atrybutów CSS max-height i max-width Bardzo podobne, ale max-inline-size Atrybut zależy od kierunku wewnętrznego.

Przykład

Przykład 1

Ustaw maksymalny rozmiar elementu <div> w kierunku wewnętrznym na 60 pikseli:

div {
  max-inline-size: 60px;
}

Spróbuj sam

Przykład 2: Tryb pisma

Ustaw kierunek wewnętrzny elementu <div> jako writing-mode Kiedy wartość atrybutu ustawiona jest na vertical-rl, kierunek wewnętrzny zmienia się z boczny na dolny, co wpływa na max-inline-size Działanie atrybutu:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Spróbuj sam

Przykład 3: Max-inline-size vs Inline-size

Obserwuj element <div> (inline-size i inny element <div> (max-inline-size Różne reakcje na zmianę rozmiaru zawartości przy 100px ()

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Spróbuj sam

Gramatyka CSS

max-inline-size: auto|length|initial|inherit;

Wartość atrybutu

Wartość	Opis
auto	Domyślnie. Domyślna wartość max-inline-size elementu.
length	Używaj jednostek takich jak px, pt, cm itp. Zobacz:Jednostki CSS.
%	Określ procentowy rozmiar względem osi odpowiedniej dla elementu rodzica.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	auto
Inheredność:	Nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.maxInlineSize="60px"