Flex kısayolu

flex kısayolu ile grow, shrink ve basis'i tek satırda yazarsın.

flex kısayolu

flex kısayolu, flex-grow, flex-shrink ve flex-basis değerlerini tek satırda yazmanın yoludur. Yazımı: flex: grow shrink basis. Örnek: flex: 1 0 auto, büyüme 1, daralma 0, taban auto demektir.

Bazı değerler kısa yazılabilir. flex: 1, aslında flex: 1 1 0% anlamına gelir. flex: auto ise 1 1 auto'ya eşittir.

flex: auto ve flex: none

İki yaygın kısayol daha var. flex: auto, flex: 1 1 auto'ya eşittir: öge boşluğu kaplar ama içerik boyutundan başlar. flex: none, flex: 0 0 auto'ya eşittir: öge ne büyür ne daralır.

Bunlar pratik kısayollardır. flex: none genelde sabit boyutlu araç çubuğu ögeleri için uygundur.

Uygulama Karta flex kısayolu ver

Bir .card sınıfı için flex: 1 0 200px bildirimi ekle. Böylece kart en az 200 pikselden başlar, daralmaz ve boşluğu orantılı paylaşır.

Örnek çözümü göster

/* kart için flex kısayolu */
.card {
  flex: 1 0 200px;
}

Kendini test et

flex: 1 neyin kısaltmasıdır?
```
.item {
  flex: 1;
}
```
- flex: 0 1 auto
- flex: 1 0 auto
- flex: 1 1 0%
- flex: 0 0 auto
Cevabı göster

flex: 1 1 0% — Doğru. flex: 1, flex: 1 1 0% anlamına gelir; öge boşluğun tamamını alır ve sıfırdan başlar.

flex: 1 0 auto bildirimini yaz

.toolbar button {
  ____;
}

Cevabı göster

.toolbar button {
  flex: 1 0 auto;
}

Her kısayolu açılımına eşle

flex: 1

1 1 0%
flex: auto

1 1 auto
flex: none

0 0 auto
flex: 0

0 1 0%

Sıradaki ders: Order

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler