Bölüm 2: Ne Fr(eylem)?

Faydalı Alternatif Metin Yazma

Yazının ikinci bölümünde CSS Izgarasında Hata Ayıklama dizi, bir göz atacağız fr (veya kesir) birimler. Cum birimler ızgara izlerini boyutlandırmak için çok kullanışlıdır ve duyarlı düzenler oluşturma sürecini büyük ölçüde basitleştirir. Ancak nasıl çalıştıklarını anlamazsanız karşılaşabileceğiniz bir veya iki beklenmedik davranış vardır. Bu makale, bunların gizemini çözmeyi amaçlayacaktır.

giriiş

bu fr birim, Grid’e özel yeni bir birimdir. Izgara kapsayıcısındaki kullanılabilir alanın bir oranına göre ızgara izlerinizi boyutlandırmanıza olanak tanır. Kullanarak fr esnek bir düzen için yüzdeler yerine birimler, dağınık ve karmaşıklığı önleyebiliriz hesap() ızgara izlerimizi boyutlandırma işlevleri. Basit bir örnek olarak, eşit genişlikte dört sütun oluşturabiliriz:

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 20px;
}
Şekil 01 Dört eşit genişlikte iz (her biri 1fr boyutunda)

Izgara, her sütun izi arasındaki 20 piksellik boşluğu dikkate alır ve kalan alanı eşit olarak dağıtır. Sabit parçaların yanında da kullanabilirsiniz:

.grid {
display: grid;
grid-template-columns: repeat(3, 200px) 1fr;
column-gap: 20px;
}
200 piksellik üç ızgara öğesi ve 1fr'lik bir ızgara öğesi
Şekil 02 Sağdaki 1fr sütunu, sabit hatlar hesaba katıldığında kalan tüm alanı dolduracak şekilde genişler.

Bu bize 200 piksellik üç sabit sütun ve fr kalan alanı kaplayacak olan birim.

katlarını kullanabiliriz fr orantılı olarak daha büyük veya daha küçük parçalar oluşturmak için birim. Bu örnekte, ikinci iz genişliğinin iki katı olacak ve dördüncü iz, birinci ve üçüncü izlerin genişliğinin üç katı olacaktır.

.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr 3fr;
column-gap: 20px;
}
Farklı genişliklerde dört ızgara öğesi
Şekil 02

Tüm fr birimleri eşit oluşturulmaz

Yaygın bir hata, tüm parçaların aynı sayıda fr birimler aynı boyutta olacaktır. Örneğin, iz boyutlandırma için yüzdeler kullanıyorsanız kesinlikle beklediğiniz budur. Ancak yukarıdaki ilk ve son örnekleri karşılaştırırsak, oldukça açık bir şekilde görebiliriz ki, 1 saat son örnekteki sütunlar (Şekil 03) olumsuzluk ilk örnektekilerle aynı boyutta (Şekil 01), aynı değeri kullanmasına rağmen! Bunun nedeni, fr birimler esnek birimler. Piksel, rem, ems ve diğerleri gibi uzunluklar gibi davranmazlar, bu nedenle kullanılamazlar. calc() fonksiyonlar. Doğrudan spesifikasyondan alıntı yapmak için:

fr birimleriyle boyutlandırılan izler, esnek öğelerin esnek bir kaptaki alanı doldurmasına benzer şekilde artık alana yanıt olarak esnedikleri için “esnek izler” olarak adlandırılır.

Esnek parçalar, Grid’in boyutlandırma algoritmasına göre en son çözülür. Tarayıcı, tüm sabit izleri ve sütun veya satır boşluklarını ve ayrıca aşağıdaki gibi ifadeler kullanılarak boyutlandırılan parçaların maksimum boyutunu hesaba katar. minmax()ardından kalan alanı buna göre dağıtır.

Aşağıdaki örneği göz önünde bulundurun:

.grid {
display: grid;
grid-template-columns: repeat(3, minmax(20px, 300px)) 1fr;
}

İle boyutlandırılmış üç sütunumuz var minmax() (maksimum 300 piksel boyutunda), artı bir sütun 1 saat. Izgara kabının genişliği üç sütunun toplamından (900 piksel) azsa, son sütunun maksimum boyutu içeriğe bağlı olacaktır. İz ızgara öğesi içermiyorsa (veya ızgara öğesinin içeriği yoksa ve dolgu veya kenarlıklar gibi boyutunu etkileyen başka bir şey yoksa), çözümlenmiş genişliği 0 olacaktır – bu nedenle görünmez olacaktır. Yalnızca ızgara kapsayıcımız 900 pikselden daha büyük olduğunda (örneğin daha büyük görünüm pencereleri için) bunu göreceğiz. 1 saat ızgarada kalan boşluğu dolduracak sütun.

Kalemi Gör minmax() ve fr Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

kesirlerin kesirleri

dağıtmanıza gerek yok tüm bir ızgaradaki kullanılabilir alanın. Ayrıca 1fr’den daha düşük değerler kullanarak parçaları boyutlandırabiliriz.

Her biri 0,5 fr’de üç ızgara izimiz varsa, bunların kullanılabilir alanın yarısını, yani bir kesirin bir kısmını kaplamasını bekleyebiliriz. Ancak bu demo, burada gerçekte ne olduğunu gösteriyor.

Kalemi Gör kesirlerin kesirleri Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

0.5fr boyutundaki parçalar aslında 1fr gibi davranıyor! Düşünürsek bu biraz şaşırtıcı olabilir. fr uzunluğa dayalı birimlerle aynı şekilde izler (yüzdeler gibi), ancak bunları esnek öğeler olarak düşünürsek daha net hale gelir.

Esnek faktörü anlamak

CSS Izgarası belirtimindeki fr biriminin değeri, esnek faktör. herhangi birinin değeri fr izler bu formülle hesaplanır:

<flex factor of the track> * <leftover space> / <sum of all flex factors>

Spesifikasyon, bir parçanın esnek faktörü 1’den az olduğunda ne olduğunu açıklar:

Esnek faktörlerin toplamı 1’den küçükse, tüm şeyi doldurmak için genişlemek yerine, kalan alanın yalnızca karşılık gelen bir kısmını alacaktır.

İzlerimizin her biri 0,5 fr olduğundan, tüm esnek faktörlerimizin toplamı tam olarak 1 – 1.5’ten büyüktür. Böylece sütun izlerimiz mevcut tüm alanı dolduracak şekilde genişler. Ancak, her parçayı örneğin 0,2fr’de boyutlandırırsak, esnek faktörlerin toplamı 0,6 olacaktır. Bunu denersek, her bir öğenin mevcut alanın eşdeğer oranını alacağını görebiliriz.

Kalemi Gör kesirlerin kesirleri Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

İçsel ve dışsal boyutlandırma

büyüklüğünde olduğunu gördük. fr izler, ızgaranın geri kalanından etkilenir: Diğer izlerin boyutları ve gap değerler. Bu olarak bilinir dışsal boyutlandırma – boyutun bağlama göre belirlendiği yer. Ama bir boyutu fr parça da içeriğine bağlıdır. 1fr’lik üç sütununuz varsa ve yatay boyutu eşit dağıtılmış alandan daha büyük olan bu sütunlardan birine bir öğe yerleştirirseniz, o iz içeriği barındırmak için büyürken diğerleri yer açmak için küçülür. Bu içsel boyutlandırma. ( İçsel ve Dışsal boyutlandırma belirtimi tam bir açıklama sunar.)

Bu örnekte üç alt öğeden oluşan bir ızgaramız var ve bu alt öğelerden biri gerçekten uzun bir kelime içeriyor:

Kalemi Gör Fr birimleri Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Daha uzun kelimeyi içeren sütunun, aynı birim ile boyutlandırılmış olmasına rağmen diğer iki parçadan daha büyük olduğunu görebiliriz. (Aynı şey, ızgarada kendi içsel boyutları olan bir içeriğiniz varsa – örneğin bir <img> eleman ile width: 600px CSS’de.)

Bu mantıklı bir davranıştır ve içeriğimizin kesilmesini veya kapsayıcıdan taşmasını önler. Ama her zaman arzu edilmez. Izgaramızın amacı katı bir görsel düzen dayatmaksa, bunun düzenimizi bozma potansiyeli vardır. Izgara izlerimizi, içeriklerinin boyutundan bağımsız olarak mevcut alanın eşit bir oranını kaplayacak şekilde sıkıştırmak istiyorsak, CSS Grid’lerini kullanabiliriz. minmax() işlev. Varsayılan olarak Grid, 1fr’lik parçaların minimum otomatik boyutu varmış gibi etkin bir şekilde davranır – minmax(auto, 1fr). Farklı bir minimum sağlayarak (örn. 0), ızgara izlerimizin içeriğe sığacak şekilde genişlemesini önleyebiliriz. Bunu aşağıdaki örnekte çalışırken görebilirsiniz:

Kalemi Gör minmax() ile Fr birimleri Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Çözüm

Fr birimleri aslında Grid’de çalışmak için en basit birimlerdir ve çoğunlukla yüzdeleri kullanmaktan çok daha az acıya neden olur ve hesap() ızgara izleriniz için! Bunları kullanmaktan çekinmeyin! Umarım bu makale, daha sıra dışı senaryolara yakalanırsanız kullanışlı bir referans olabilir.

daha fazla okuma

Izgara Düzeni ile En İyi Uygulamalar Rachel Andrew tarafından

CSS Mizanpajında ​​Boyutlandırmayı Anlama Rachel Andrew tarafından

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.