Maks. satır içi boyut - CSS Hileleri

max-inline-sizeCSS'de writing-mode, yatay olduğunda bir öğenin maksimum genişliğini veya writing-modedikey olduğunda öğenin maksimum yüksekliğini tanımlayan mantıksal bir özelliktir .

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

Yukarıdaki örnekten tahmin edebileceğiniz gibi, writing-modeözellik metnin yönünü ve düzen akışını 90 derece değiştirir.

Oryantasyonu değiştirmenin ana nedeni, süslü tasarımlar oluşturmanın yanı sıra, bir sitede uluslararasılaşmayı barındırmaktır. Çince, Japonca ve Korece gibi birçok Doğu Asya alfabesi yatay veya dikey olarak yazılabilir. Mantıksal özellikleri kullanarak, kullanıcının yazma moduna bağlı olarak öğelerin doğru boyutlandırma yönünü sağlayabiliriz.

Jen Simmons'ın CSS yazma modlarının derinliklerine inen bir makalesi ve sunumu var.

`max-width`Mülkü kullanamaz mıyız ?

Evet! Ancak Internet Explorer'ı desteklemiyorsanız, max-inline-sizebunun yerine kullanmamanız için bir neden yoktur . max-widthfiziksel bir boyuttur, bu nedenle yazma modu değiştiğinde, bir öğe yatay genişlik boyutunu korur ve dikey olarak ayarlandığında bir düzeni bozar. Mantıksal özellikler, max-inline-sizebu değişikliklere yanıt verebilir ve boyutu doğru yönde uygulayabilir.

Sözdizimi

max-inline-size: ;

İlk: auto
Şunlar için geçerlidir: aynı heightvewidth
Devralındı: hayır
Yüzdeler: karşılık gelen fiziksel özellik için
Hesaplanan değer:height ve ile aynıwidth
Animasyon türü: hesaplanan değer türüne göre

Değerler

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

Demo

Olarak writing-modeayarlandığında vertical-rl, içerik düzeni değiştirerek dönecektir. max-widthKutunun genişliği içerikle birlikte dönecektir. Ama max-inline-sizeakıllı! writing-modeDeğeri ne olursa olsun genişliğini inceliğinde bırakır . writing-modeİkisi arasındaki farkı görmek için aşağıdaki demoda geçiş yapın .