Özet - Çok yönlü kart

Mantıksal özelliklerle çok yönlü kart düzeni kurarsın.

Özet — Yazım modu ve mantıksal özellikler

Bu grupta writing-mode, mantıksal özellikler, inset, eksenler ve direction kavramlarını birleştirdin. Yazım modu metnin akışını değiştirir; mantıksal özellikler eksenlere göre çalışır.

Şimdi tüm bu bildirimleri bir arada kullanacaksın: bir kart hem yatay hem dikey düzende çalışsın. Yön değişse bile yerleşimi koruyan bir bileşen tasarlayacaksın.

Uygulama Çok yönlü kart kenar boşlukları

.multi-card seçicisi için şu bildirimleri yaz: margin-inline: 1rem ve padding-block: 2rem. Her ikisi de aynı blokta olsun. Yalnızca bu iki bildirimi içersin.

Örnek çözümü göster

/* kart çok yönlü olsun */
.multi-card {
  margin-inline: 1rem;
  padding-block: 2rem;
}

Uygulama RTL uyumlu yerleşim

.news seçicisi için iki bildirim yaz: writing-mode: horizontal-tb ve direction: rtl. Bu sayede kart yatay modda ama sağdan sola akar. İki bildirim de aynı blokta olsun.

Örnek çözümü göster

/* haber kutusu RTL uyumlu olsun */
.news {
  writing-mode: horizontal-tb;
  direction: rtl;
}

Kendini test et

Hangisi mantıksal bir özelliktir?
- padding-top
- margin-right
- padding-block
- bottom: 10px
Cevabı göster

padding-block — Doğru. padding-block mantıksal bir özelliktir.

Tam kaplayan kaplama

.overlay { position: fixed; ____: 0; }

Cevabı göster

.overlay { position: fixed; inset: 0; }

Sıradaki ders: Sr-only tekniği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler