CSS max-inline-size Özelliği

Önceki sayfa max-height
Sonraki sayfa max-width

Tanım ve Kullanım

max-inline-size özellik, elementin satır içi yönelimindeki maksimum boyutunu belirtir.

İçerik, satır içi yönelimdeki boyutu maksimum boyuttan küçükse, max-inline-size özellik değeri etkisizdir.

İçerik, satır içi yönelimdeki boyutu maksimum boyuttan büyükse, max-inline-size özellik değerleri.

Dikkat:ilgili CSS özelliklerini writing-mode satır içi yönelimi tanımlar, bu da max-inline-size özelliklerinin sonuçları. İngilizce sayfalar için, blok yönelimi aşağıya doğru, satır içi yönelim ise soldan sağa doğrudır.

CSS max-inline-size özellikleri CSS özellikleri max-height ve max-width Çok benzer, ancak max-inline-size Özellik, satır içi yönelime bağlıdır.

Örnek

Örnek 1

div elementinin satır içi yönelimindeki maksimum boyutunu 60 piksel olarak ayarlayın:

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

Kişisel Deneyim

Örnek 2: Yazı Modu

<div> elementinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, satır içi yönelim yataydan aşağıya doğru değişir ve bu, max-inline-size Özelliğin Çalışma Yöntemi:

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

Kişisel Deneyim

Örnek 3: Max-inline-size vs Inline-size

Bir <div> elementini gözlemleyin:inline-size 100px) ve diğer bir <div> elementi (max-inline-size İçerik boyutundaki değişikliklerde farklı tepkiler (100px) için:

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

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
auto	Varsayılan. Elementin varsayılan max-inline-size değeri.
length	px, pt, cm gibi birimler kullanarak. bkz.:CSS Birimleri.
%	Ebeveyn elementine göre, ilgili eksen üzerindeki boyutun yüzdesini belirtir.
initial	Bu özelliği varsayılan değerine ayarlar. bkz.: initial.
inherit	Bu özelliği ebeveyn elementinden devralır. bkz.: inherit.

Teknik Ayrıntılar

Varsayılan Değer:	auto
Devralabilirlik:	Hayır
Animasyon Yapımı:	Desteklenir. Aşağıdan bkz.:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.maxInlineSize="60px"