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%