Flexbox'ın nasıl çalıştığı hakkında daha fazla bilgi - büyük, renkli, hareketli giflerde açıklandı

En son temel Flexbox özelliklerine başladık: flex-direction, justify-content, align-items ve align-self.

Bu komutlar, temel düzenler oluşturmak için güçlüdür. Ancak Flexbox ile web sayfaları oluşturmaya başladığınızda, potansiyelini en üst düzeye çıkarmak için daha derine inmeniz gerekecek.

Şimdi Flexbox boyutlandırmaya ve uyarlanabilir ve güzel düzenler oluşturmak için bundan nasıl yararlanabileceğinizi derinlemesine inceleyelim.

Özellik # 1: Esnek Temel

Son makalede, çoğunlukla konteyner elemanlarına uygulanan özelliklere baktık. Bu sefer, özellikle alt öğelere uygulanan boyutlandırmayı inceleyeceğiz.

İlk özelliğimiz, bence Flexbox eğitimlerinde en az iyi açıklanan özelliklerden biridir.

Ama - endişelenme. Aslında oldukça basit.

Flex- base , bir öğenin diğer Flexbox özellikleri tarafından değiştirilmeden önce varsayılan boyutunu kontrol eder (bundan sonra daha fazlası).

Aşağıdaki GIF'te bu, width özelliğiyle değiştirilebilir olduğu anlamına gelir:

Ancak esnek tabanı genişlikten benzersiz kılan şey, iyi esnek eksenlerimize karşılık gelmesidir:

Esnek taban , ana eksen boyunca bir elemanın boyutunu etkiler .

Esnek tabanımızı aynı tuttuğumuzda, ancak ana eksenimizin yönünü değiştirdiğimizde ne olacağını görelim:

Yüksekliği manuel olarak ayarlamaktan genişliği ayarlamaya geçmek zorunda olduğumuzu unutmayın. Esnek taban , esnek yöne bağlı olarak dönüşümlü olarak genişliği veya yüksekliği belirler .

Özellik # 2: Flex Grow

Şimdi biraz daha karmaşık olacağız.

Öncelikle tüm karelerimizi aynı genişliğe, 120 piksele ayarlayalım:

Şimdi, flex-Grow adlı özelliğe gelince , varsayılan değer 0'dır . Bu, karelerin kaptaki alanı kaplamak için büyümesine izin verilmediği anlamına gelir.

Bu ne anlama geliyor? Peki, her kare için flex-Grow'u 1'e çıkarmayı deneyelim :

Kareler, aralarında eşit olarak dağılmış alanla birlikte, toplu olarak kabın tüm genişliğini kaplar. Flex-Grow değeri, genişliği geçersiz kılar.

Bununla birlikte, esnek büyüme ile ilgili kafa karıştırıcı kısım, değerin gerçekte ne anlama geldiğidir. Flex-Grow: 1 aslında ne anlama geliyor?

Her karenin esnek büyümesini 999'a ayarlarsak şöyle görünür:

Bu… tamamen aynı.

Bunun nedeni, esnek büyümenin mutlak bir değer olmaması - göreli bir değer olmasıdır.

Önemli olan, bir karenin kendi başına esnek büyüme değerinin ne olduğu değil , diğer karelere göre ne olduğudur.

Her kareyi esnek büyümeye ayarlarsak: 1 ve ardından Kare # 3'ün esnek büyümesini ayarlarsak, değişiklikleri görürüz:

Burada neler olduğunu gerçekten anlamak için, biraz (basit) matematiğe hızlı bir şekilde gidelim.

Her kare 1 esnek büyüme ile başlar. Her karenin esnek büyümesini toplarsak, toplamımız altı olur. Konteyner böylece 6 ayrı bölüme ayrılmıştır. Her kare, kaptaki mevcut alanın 1 / 6'sını dolduracak şekilde büyür.

Kare # 3'ün esnek büyümesini 2'ye ayarladığımızda, esnek büyüme özelliklerinin toplamı 1 + 1 + 2 + 1 + 1 + 1 olduğundan, kapsayıcı şimdi 7 farklı bölüme ayrılmıştır .

3. kare daha sonra bu alanın 2 / 7'sini alır ve geri kalanı 1 / 7'sini alır.

Flex-Grow'a gittiğimizde: 3 Numaralı Kare için 3, 8 bölüme (1 + 1 + 3 + 1 + 1 + 1) bölünür ve 3 Numaralı Kare 3/8 alır ve gerisi 1/8 .

Ve bunun gibi.

Flex-Grow tamamen oranlarla ilgilidir . Her kareyi esnek büyüme: 4 ve kare # 3'ü esnek büyüme: 12 olarak ayarlarsak, sırasıyla 1 ve 3'müş gibi aynı sonucu elde ederiz:

Önemli olan, her bir karenin esnek büyümesinin diğerleriyle orantılı olmasıdır.

Son bir not olarak, aynı esnek tabanlı gibi, esnek büyümenin ana eksen boyunca geçerli olduğunu unutmayın. Esnek yönünü sütun olarak ayarlamazsak, karelerimiz yalnızca genişlik açısından büyüyecektir.

Özellik # 3: Flex Shrink

Flex-büzülme, bir karenin ne kadar küçülmesine izin verileceğini belirleyen esnek büyümenin tersidir.

Bu sadece, elemanların konteynırlarına sığması için büzüşmesi gerektiğinde, yani konteyner çok küçük olduğunda devreye girer.

Ana kullanımı, hangi öğeleri küçültmek istediğinizi ve hangi öğeleri daraltmayacağınızı belirlemektir. Varsayılan olarak, her karede 1 esnek küçültme vardır - bu, kutu küçüldükçe küçüleceği anlamına gelir.

Eylemde görelim. Aşağıdaki GIFS'de, kareler 1'lik bir esnek büyümeye sahiptir, bu nedenle kabı doldururlar ve 1'lik bir esnek küçülme vardır, böylece küçülmelerine izin verilir.

Şimdi Kare # 3'ün esnek küçültmesini 0'a ayarlayalım. Küçültmek yasaktır, bu nedenle kabı sığdırmak için büyürken ayarlanan 120 piksel genişliğinin altına dalmayı reddeder.

Flex-shrink için varsayılan değer 1'dir - bu, siz onlara söylemeyinceye kadar öğelerinizin küçüleceği anlamına gelir!

Yine, flex-shrink oranlarla ilgilidir. Bir kutuda 6 esnek küçültme varsa ve geri kalanında esnek küçültme 2'ye sahipse, bir kutu, alan sıkıştırıldığında 3 kat daha hızlı küçülür.

Buradaki ifadelere dikkat edin: 3x flex-shrink'e sahip kare 3 kat daha hızlı küçülür. Bu, genişliğin 1 / 3'ünü küçülteceği anlamına gelmez.

Birazdan, şeylerin ne kadar küçüldüğüne ve büyüdüğüne daha derinlemesine dalacağız. Ama önce son mülkümüze gidelim ve her şeyi bir araya getirelim.

Özellik # 4: Esnek

Flex, büyüme, küçültme ve temel anlamına gelen kısaltmadır - hepsi bir araya getirildiğinde.

Varsayılan olarak 0 (büyüme) 1 (küçültme) ve otomatik (temel) değerindedir.

Son örneğimiz için, iki kutuya kadar sadeleştirelim.

İşte özellikleri:

.square#one { flex: 2 1 300px;}
.square#two { flex: 1 2 300px;}

Her ikisi de aynı esnek temele sahiptir. Bu, her ikisi için de yeterli alan varsa (kapsayıcı 600 piksel artı kenar boşlukları ve dolgu için yer), her ikisinin de 300 piksel genişliğinde olacağı anlamına gelir.

Ancak kutu büyüdükçe, Kare 1 (daha yüksek esnek büyüme ile) iki kat daha hızlı büyüyecek. Kutu küçüldükçe, Square 2 (daha yüksek flex-shrink ile) iki kat daha hızlı küçülecektir.

Şimdi hep beraber:

Şeyler Nasıl Küçülür ve Büyür?

İşte kafa karıştırıcı olabilecek şey: Kare 1 büyüdüğünde, Kare 2'nin iki katı kadar büyümez. Aynı şekilde, Kare 2 küçüldüğünde, Kare 1'in yarısı kadar küçülmez - oran olsa bile flex-shrink oranı 2'ye 1'dir.

2'ye 1 ya da 1'e 2 olan boyutları değil , küçülme ve büyüme oranları.

Biraz Matematik

Kapsayıcı için başlangıç ​​boyutu 640 pikseldir. Kabın her iki tarafında 20 piksellik dolguyu hesaba kattıktan sonra, bu, her iki karenin de 300 piksellik esnek esasına dönmesi için yeterli alan bırakır.

Kapsayıcı 430 piksel olarak ayarlandığında, 210 piksellik alanı kaybettik . 1 esnek küçültme ile Kare 1 70 piksel kaybeder . Flex-küçültme 2 olan Kare 2, 140 piksel kaybeder .

Kapsayıcı 340 piksele küçüldüğünde, artık 300 piksel alan kaybettik . Kare 1 kaybeder 100 piksel kare 2 kaybeder 200px .

Kayıp alan, ilgili esnek büzülme oranlarına (2'ye 1) göre bölünür.

Flex-Grow ile aynı hikaye. Kap 940px kadar uzar ve biz elde ettik zaman 300px alan, Kare 1 ekstra alır 200px ve Kare 2 ekstra alır 100px .

Esnek özellikler söz konusu olduğunda, oranlar oyunun adıdır.

Yukarıdaki GIF'te, esnek tabanından farkı gösteren delta (see) ile genişliğin oranlara göre nasıl ayarlandığını görebilirsiniz.

Sonuç

Son bir özet olarak: flex-base, herhangi bir büyüme veya küçülme meydana gelmeden önce bir elemanın ana eksen boyunca ne kadar büyük olacağını kontrol eder. Flex-Grow, kardeş öğelerle orantılı olarak ne kadar büyüyeceğini belirler ve flex-shrink, ne kadar küçüleceğini belirler.

Kapsanacak birkaç Flexbox özelliğimiz var - önümüzdeki haftalarda buna dikkat edin.

Okuduğunuz için çok teşekkürler! Bu makalelere verilen yanıt çok büyük oldu. Okumak, yanıtlamak, tavsiye etmek ve paylaşmak için zaman ayıran herkesi gerçekten takdir ediyorum!

Benzer bir makalede açıklanmasını istediğiniz belirli bir kavram (Flexbox veya başka türlü) varsa, bir yanıt bırakın veya bana tweet atın. Beni Twitter ve Medium'da da takip edebilirsiniz (aşağıdaki takip düğmesine basarak).