Flex-grow
flex-grow ile öğelerin büyümesini öğrenirsin.
flex-grow nedir?
flex-grow, bir flex ögesinin boş alanı ne kadar büyüyerek kaplayacağını belirler. Varsayılan değer 0'dır; yani öge kendi boyundan büyük olmaz. flex-grow: 1 yazarsan öge kalan boşluğun tamamını alır.
İki ögeye de flex-grow: 1 verirsen boşluğu eşit bölüşür. Birine 2, diğerine 1 verirsen ilk öge iki katı büyür. Bu değerler orantıdır, sabit boyut değil.
flex-shrink
flex-shrink ögenin daraldığında ne kadar küçüleceğini belirler. Varsayılan değer 1'dir; yani ögeler gerektiğinde eşit oranda daralır. flex-shrink: 0 verirsen öge hiç daralmaz, taşma oluşabilir.
İki ögeden birine 3, diğerine 1 verirsen ilk öge üç katı hızlı daralır. Bu da flex-grow gibi bir orandır; küçülme miktarı ögenin başlangıç boyutuna bağlıdır.
flex-basis
flex-basis ögenin büyüme ve daralmadan önceki başlangıç boyutudur. Varsayılan değer auto'dur; bu durumda öge içerik genişliğini ya da width değerini alır. flex-basis: 200px yazarsan öge 200 pikselden başlar.
Bu değer büyüme ve daralmanın hesaplandığı taban olur. flex-basis: 0 seçtiğinde tüm ögeler sıfırdan başlar ve yalnızca flex-grow oranları boyutu belirler.
Uygulama İki ögeyi orantılı büyüt
Bir .row esnek kapsayıcısı ekle ve display: flex ver. İçine yerleşen :first-child ögesine flex-grow: 2, :last-child ögesine flex-grow: 1 yaz.
Örnek çözümü göster
/* iki ögeyi orantılı büyüt */
.row {
display: flex;
}
.row > :first-child {
flex-grow: 2;
}
.row > :last-child {
flex-grow: 1;
}Kendini test et
-
İki ögeli bir flex satırında bir öge flex-grow: 2, diğeri flex-grow: 1 alırsa ne olur?
.row { display: flex; } .row > :first-child { flex-grow: 2; } .row > :last-child { flex-grow: 1; }- İkinci öge iki katı büyür
- İlk öge ikincinin iki katı büyür
- İki öge eşit büyür
- Ögeler hiç büyümez
Cevabı göster
İlk öge ikincinin iki katı büyür — Doğru. flex-grow: 2, flex-grow: 1'e göre iki katı oran verir; ilk öge iki katı büyür.
-
flex-shrink: 0 bildirimini yaz
.item { flex-grow: 0; ____: 0; }Cevabı göster
.item { flex-grow: 0; flex-shrink: 0; } -
Her özelliği rolüne eşle
- flex-grow
- Büyüme oranı
- flex-shrink
- Daralma oranı
- flex-basis
- Başlangıç boyutu
- 0
- flex-grow varsayılanı