Flexbox: Bu Esnek Kutu Ne Kadar Büyük?

Bu, Flexbox'taki serimin üçüncü bölümü. Son iki makalede, bir esnek kap oluşturduğunuzda neler olduğuna baktık ve Flexbox'ta çalıştığı gibi hizalamayı keşfettik. Bu sefer boyutlandırmaya bakacağız. Esnek öğelerimizin boyutunu nasıl kontrol ederiz ve boyutu kontrol ederken tarayıcı hangi seçimleri yapar?

Esnek Öğelerin İlk Gösterimi

İçinde değişken uzunluklarda içerik bulunan ve üst öğelerini display: flex olarak ayarlayan bir öğe setim varsa, öğeler bir satır olarak görüntülenecek ve o eksenin başlangıcında sıralanacaktır. Aşağıdaki örnekte, üç öğem az miktarda içeriğe sahip ve her öğenin içeriğini kesintisiz bir satır olarak görüntüleyebiliyor. Esnek kabın sonunda, flex-grow başlangıç ​​değeri 0 olduğundan, öğelerin büyümediği boşluk var, büyümez .

Bu öğelere daha fazla metin eklersem, sonunda kapsayıcıyı doldururlar ve metin sarmaya başlar. Kutulara, her kutuda ne kadar metin olduğuna karşılık gelen kaptaki alanın bir kısmı atanır - daha uzun bir metin dizesine sahip bir öğeye daha fazla alan atanır. Bu, bir sonraki kapı öğesi yalnızca tek bir kelime içerdiğinde, çok fazla metin içeren uzun ve ince bir sütunla sonuçlanmadığımız anlamına gelir.

Flexbox'ı daha önce kullandıysanız, bu davranış muhtemelen size tanıdık gelecektir, ancak belki de tarayıcının bu boyutlandırmanın nasıl çalıştığını merak etmişsinizdir, sanki birden fazla modern tarayıcıya bakarsanız hepsinin aynı şeyi yaptığını göreceksiniz. Bu, Flexbox'ı yeni bir tarayıcıda veya başka bir kullanıcı aracısında uygulayan herkesin bu hesaplamanın nasıl çalışması gerektiğinin farkında olduğundan emin olmak için, bunun gibi ayrıntıların spesifikasyonda işlendiği gerçeğine bağlıdır. Bu bilgiyi kendimiz bulmak için spesifikasyonu kullanabiliriz.

CSS İçsel ve Dışsal Boyutlandırma Belirtimi

Flexbox spesifikasyonunda boyutlandırmayla ilgili herhangi bir şeye baktığınızda, ihtiyacınız olan birçok bilginin başka bir spesifikasyonda olduğunu oldukça hızlı bir şekilde keşfedersiniz - CSS İçsel ve Dışsal Boyutlandırma. Bunun nedeni, kullandığımız boyutlandırma kavramlarının Flexbox'a özgü olmaması ve aynı şekilde hizalama özelliklerinin Flexbox'a özgü olmamasıdır. Ancak, bu boyutlandırma yapılarının Flexbox'ta nasıl kullanıldığı konusunda Flexbox özelliklerine bakmanız gerekir. Biraz ileri geri atlıyormuşsunuz gibi gelebilir, bu yüzden makalenin geri kalanında kullanacağım birkaç temel tanımı burada tamamlayacağım.

Tercih Edilen Boyut

Bir kutunun tercih edilen boyutu , width veya height tarafından tanımlanan boyut veya inline-size ve block-size boyutu gibi bu özellikler için mantıksal takma adlardır. Kullanarak:

 .box { width: 500px; }

Veya mantıksal takma ad inline-size :

 .box { inline-size: 500px; }

Kutunuzun 500 piksel genişliğinde veya satır içi yönde 500 piksel olmasını istediğinizi belirtiyorsunuz.

minimum içerik Boyut

Minimum içerik boyutu, bir kutunun taşmaya neden olmadan olabileceği en küçük boyuttur. Kutunuz metin içeriyorsa, olası tüm yumuşak sarma fırsatları alınacaktır.

maksimum içerik Boyutu

Maksimum içerik boyutu, kutunun içeriği içerebileceği en büyük boyuttur. Kutu, onu bölmek için biçimlendirme içermeyen metin içeriyorsa, uzun bir kesintisiz dize olarak görüntülenecektir.

Esnek Ürün Ana Boyutu

Esnek bir öğenin ana boyutu , ana boyutta sahip olduğu boyuttur. Arka arkaya çalışıyorsanız - İngilizce - o zaman ana boyut genişliktir. İngilizce bir sütunda, ana boyut yüksekliktir.

Öğelerin ayrıca, ana boyutta minimum min-width veya min-height ile tanımlanan bir minimum ve maksimum ana boyutu vardır.

Esnek Bir Öğenin Boyutunu Çalışmak

Artık bazı terimleri tanımladığımıza göre, esnek öğelerimizin nasıl boyutlandırıldığına bir göz atabiliriz. flex özelliklerin başlangıç ​​değeri aşağıdaki gibidir:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

flex-basis , boyutlandırmanın hesaplandığı şeydir. flex-basis 0 ve flex-grow 1'e ayarlarsak, tüm kutularımızın başlangıç ​​genişliği yoktur, bu nedenle esnek kaptaki alan eşit olarak paylaşılır ve her öğeye aynı miktarda alan atanır.

flex-basis auto ve flex-grow: 1 , içeriğin boyutu dikkate alınarak yalnızca boş alan dağıtılır.

Boş alanın olmadığı durumlarda, örneğin tek bir satıra sığamayacak kadar içeriğimiz olduğunda, dağıtılacak alan yoktur.

Bu bize, Flexbox'ın kutularımızın boyutunu nasıl belirlediğini bilmek istiyorsak, auto ne anlama geldiğini bulmanın oldukça önemli olduğunu gösteriyor. Başlangıç ​​noktamız auto değeri olacak.

Otomatik Tanımlama

auto , CSS'deki bir şey için bir değer olarak tanımlandığında, bu bağlamda, göz atmaya değer çok özel bir anlamı olacaktır. Spesifikasyon editörü Fantasai'nin bu konuşmasında açıkladığı gibi, CSS Çalışma Grubu, herhangi bir bağlamda auto'nun ne anlama geldiğini bulmak için çok zaman harcıyor.

auto flex-basis olarak kullanıldığında ne anlama geldiğine ilişkin bilgileri şartnamede bulabiliriz. Yukarıda tanımlanan terimler, bu ifadeyi incelememize yardımcı olmalıdır.

“Bir esnek öğede belirtildiğinde, auto anahtar sözcüğü, kullanılan 'esnek temel' olarak ana boyut özelliğinin değerini alır. Bu değerin kendisi otomatikse, kullanılan değer "içerik"tir."

Dolayısıyla, flex-basis temelimiz auto ise, Flexbox tanımlanan ana boyut özelliğine bakar. Esnek öğelerimizden herhangi birine width vermiş olsaydık, ana boyutumuz olurdu. Aşağıdaki örnekte, öğelerin tümü 110 piksel genişliğe sahiptir, bu nedenle esnek temel için başlangıç ​​değeri otomatik olduğundan bu, ana boyut olarak kullanılmaktadır.

Bununla birlikte, ilk örneğimizde genişliği olmayan öğeler var, bu, ana boyutlarının auto olduğu anlamına gelir ve bu nedenle bir sonraki cümleye geçmemiz gerekir, "Bu değerin kendisi otomatikse, kullanılan değer content ."

Şimdi spesifikasyonun content anahtar kelimesi hakkında ne söylediğine bakmamız gerekiyor. Bu, flex-basis için (destekleyen tarayıcılarda) kullanabileceğiniz başka bir değerdir, örneğin:

 .item { flex: 1 1 content; }

Spesifikasyon, content şu şekilde tanımlar:

“Esnek öğenin içeriğine göre otomatik bir boyutu belirtir. (Genellikle maksimum içerik boyutuna eşdeğerdir, ancak en boy oranlarını, içsel boyut kısıtlamalarını ve dikey akışları işlemek için ayarlamalar içerir”

Örneğimizde, metin içeren esnek öğelerle, daha karmaşık ayarlamalardan bazılarını yok sayabilir ve content maksimum içerik boyutu olarak ele alabiliriz.

Bu, her öğede az miktarda metin olduğunda metnin neden kaydırılmadığını açıklıyor. Esnek öğeler otomatik olarak boyutlandırılır, bu nedenle Flexbox maksimum içerik boyutlarına bakar, öğeler kaplarına bu boyutta sığar ve iş tamamdır!

Hikaye burada bitmiyor, çünkü daha fazla içerik eklediğimizde kutular maksimum içerik boyutunda kalmıyor. Yaparlarsa, esnek kaptan kırılırlar ve taşmaya neden olurlar. Kabı doldurduklarında, içerik sarmaya başlar ve öğeler, içindeki içeriğe göre farklı boyutlara gelir.

Esnek Uzunlukları Çözümleme

Spesifikasyonun oldukça karmaşık göründüğü bu noktada, ancak gerçekleşmesi gereken adımlar aşağıdaki gibidir:

İlk olarak, tüm öğelerin ana boyutunu toplayın ve kaptaki mevcut alandan daha büyük veya daha küçük olup olmadığına bakın.

Konteyner boyutu toplamdan daha büyükse, büyümek için alanımız olduğu için flex-grow faktörünü önemseyeceğiz.

Konteyner boyutu toplamdan daha küçükse, küçülmemiz gerektiğinden flex-shrink faktörünü dikkate alacağız.

Esnek olmayan öğeleri dondurun, bu da belirli öğeler için zaten bir boyuta karar verebileceğimiz anlamına gelir. Eğer flex-grow kullanıyorsak, bu, flex-grow: 0 olan tüm öğeleri içerecektir. Bu, esnek öğelerimizde kapta boşluk kaldığında sahip olduğumuz senaryodur. flex-grow başlangıç ​​değeri 0'dır, bu nedenle maksimum genişlikleri kadar büyürler ve daha sonra ana boyutlarından daha fazla büyümezler.

Eğer flex-shrink kullanıyorsak, bu flex-shrink: 0 olan tüm öğeleri içerecektir. Esnek öğeler kümemize 0'lık bir flex-shrink faktörü verirsek bu adımda ne olduğunu görebiliriz. Öğeler max-content durumunda donarlar ve bu nedenle esnemezler ve kendilerini kaba sığacak şekilde düzenlemezler.

Bizim durumumuzda - esnek öğelerin başlangıç ​​değerleriyle - öğelerimiz küçülebilir. Böylece adımlar devam eder ve algoritma, ne kadar alan tahsis edeceğini veya alacağını hesapladığı bir döngüye girer. Bizim durumumuzda, öğelerimizin toplam boyutu konteynerden daha büyük olduğu için flex-shrink kullanıyoruz, bu yüzden yer almamız gerekiyor.

flex-shrink faktörü, bizim durumumuzda max-content boyutu olan iç taban boyutu öğeleriyle çarpılır. Bu, alanı azaltmak için bir değer verir. Öğeler yalnızca flex-shrink faktörüne göre alanı kaldırırsa, küçük öğeler, tüm boşlukları kaldırılmış olarak esasen ortadan kaybolabilirken, daha büyük öğenin hala küçülecek alanı vardır.

Bu döngüde, hedef ana boyutundan daha küçük veya daha büyük olacak öğeleri kontrol etmek için ek bir adım vardır; bu durumda öğe, büyümeyi veya küçülmeyi durdurur. Yine, bu, belirli öğelerin diğer öğelere kıyasla küçük veya büyük olmasını önlemek içindir.

Daha uç durum senaryolarından bazılarına bakmadığım için spesifikasyon açısından tüm bunlar basitleştirildi ve Flexbox'ın işini yapmasına izin vermekten memnun olduğunuzu ve piksel peşinde olmadığınızı varsayarak genel olarak zihninizde daha da ileri gidebilirsiniz. mükemmellik. Aşağıdaki iki gerçeği hatırlamak çoğu durumda işe yarayacaktır.

auto büyüyorsanız, flex-basis , öğedeki herhangi bir genişlik veya yükseklik veya max-content boyutu olarak değerlendirilir. Daha sonra, bu boyutu bir başlangıç ​​noktası olarak kullanarak flex-grow faktörüne göre alan atanacaktır.

auto küçülüyorsanız, flex-basis , öğedeki herhangi bir genişlik veya yükseklik veya max-content boyutu olarak değerlendirilir. Daha sonra boşluk, flex-shrink faktörü ile çarpılan flex-basis boyutuna göre kaldırılacak ve bu nedenle öğelerin maksimum içerik boyutuyla orantılı olarak kaldırılacaktır.

Büyüme ve Küçülmeyi Kontrol Etmek

Bu makalenin çoğunu Flexbox'ın kendi haline bırakıldığında ne yaptığını açıklamakla geçirdim. Elbette, flex özelliklerini kullanarak esnek öğeleriniz üzerinde daha fazla kontrol sahibi olabilirsiniz. Sahne arkasında neler olup bittiğine dair bir anlayışla, umarım daha öngörülebilir görüneceklerdir.

Kendi flex-basis ayarlayarak veya öğenin kendisine, daha sonra flex-basis olarak kullanılacak bir boyut vererek, algoritmadan kontrolü geri alırsınız ve Flexbox'a bu belirli boyuttan büyümek veya küçültmek istediğinizi söylersiniz. flex-grow veya flex-shrink 0'a ayarlayarak büyütmeyi veya küçültmeyi tamamen kapatabilirsiniz. Ancak bu noktada, doğru yerleşim yöntemini kullanıp kullanmadığınızı kontrol etmek için esnek öğeleri kontrol etme arzusunu kullanmaya değer. Kendinizi esnek öğeleri iki boyutta sıralamaya çalışırken bulursanız, Izgara Düzeni'ni seçmeniz daha iyi olabilir.

Boyutla İlgili Sorunlarda Hata Ayıklama

Esnek öğeleriniz beklenmedik bir boyutta bitiyorsa, bunun nedeni genellikle esnek temelinizin otomatik olması ve bu öğeye genişlik veren ve daha sonra esnek temel olarak kullanılan bir şey olmasıdır. Öğeyi DevTools'ta incelemek, boyutun nereden geldiğini belirlemeye yardımcı olabilir. Ayrıca, Flexbox'ı öğeyi sıfır genişliğe sahip olarak ele almaya zorlayacak bir flex-basis 0 ayarlamayı da deneyebilirsiniz. İstediğiniz sonuç bu olmasa bile, boyutlandırma sorunlarınızın suçlusu olarak kullanımdaki flex-basis değeri belirlemenize yardımcı olacaktır.

Esnek Boşluklar

Flexbox'ın çok istenen bir özelliği, ızgara düzeninde ve çok sütunlu düzende boşlukları belirleyebildiğimiz gibi, esnek öğeler arasındaki boşlukları veya olukları belirleme yeteneğidir. Bu özellik, Box Alignment'ın bir parçası olarak Flexbox için belirtilmiştir ve ilk tarayıcı uygulaması da yolda. Firefox, Flexbox için boşluk özelliklerini Firefox 63'te göndermeyi umuyor. Aşağıdaki örnek Firefox Nightly'de görüntülenebilir.

Izgara düzeninde olduğu gibi, boşluk esnek öğelere dağıtılmadan önce boşluğun uzunluğu dikkate alınır.

Toplama

Bu makalede, Flexbox'ın esnek öğelerin ne kadar büyük olduğunu nasıl belirlediğinin bazı ince noktalarını açıklamaya çalıştım. Biraz akademik görünebilir, ancak bunun nasıl çalıştığını anlamak biraz zaman alabilir, mizanpajlarınızda Flexbox kullanırken size büyük miktarda zaman kazandırabilir. Flexbox'ın varsayılan olarak size çeşitli boyutlardaki bir grup öğenin en mantıklı düzenini vermeye çalıştığı gerçeğine geri dönmeyi gerçekten yararlı buluyorum. Bir öğenin daha fazla içeriği varsa, daha fazla alan verilir. Siz ve tasarımınız Flexbox'ın en iyi olduğunu düşündüğü şeye katılmıyorsanız, kendi flex-basis ayarlayarak kontrolü geri alabilirsiniz.