Bu makalede Flexbox’ın diğer tüm CSS modülleriyle nasıl uyum sağladığına bir göz atacağız. Flexbox’ı öğrenmek istiyorsanız hangi özelliklere dikkat etmeniz gerektiğini ve flexbox’ın neden diğer bazı modüllerden farklı olduğunu öğreneceğiz.
Not: CSS sürüm 1 ve 2, tüm CSS’nin tek bir büyük belgede tanımlandığı tek bir monolitik spesifikasyondu. CSS daha zengin özelliklere sahip bir dil haline geldikçe, CSS’nin farklı bölümlerinin farklı hızlarda ilerlemesiyle büyük bir spesifikasyonu sürdürmek sorunlu hale geldi. Bu nedenle CSS modüler hale getirildi ve çeşitli CSS Spesifikasyonları bugün CSS’yi oluşturan farklı modüllerden oluşuyor. Bu modüller birbirleriyle ilişkili ve farklı gelişim aşamalarında.
Kutu hizalama modülü
Birçok kişi için flexbox’a başlamalarının ilk nedeni, flex öğelerini bir flex konteyneri içinde düzgün bir şekilde hizalayabilmektir. Flexbox, öğelerin çapraz eksenlerinde hizalanmasına ve ana eksendeki öğelerin yaslanmasına olanak tanıyan özelliklere erişim sağlar.
Bu özellikler flexbox spesifikasyonunda kullanılmaya başlandı, ancak artık Kutu Hizalama Spesifikasyonunun da bir parçası. Bu spesifikasyon, hizalamanın sadece flexbox’ta değil tüm mizanpajlarda nasıl çalıştığını detaylandırmaktadır. Kutu hizalama, flex öğeleri arasında boşluklar veya oluklar oluşturmak da dahil olmak üzere hizalama ve yaslama ile ilgilenir.
Kutu hizalama özellikleri, kutu hizalamada olduğu gibi, flexbox belirtiminde de ayrıntılı olarak bırakılmıştır. Bunun nedeni, flexbox belirtiminin tamamlanmasının, tüm düzen türleri için bu yöntemleri ayrıntılı olarak açıklaması gereken kutu hizalama tarafından engellenmemesini sağlamaktır. Flexbox spesifikasyonunda, Kutu Hizalama Düzey 3’teki tanımların gelecekte tamamlandığında flexbox’takilerin yerini alacağını belirten bir not bulunmaktadır:
“Not: Hizalama özellikleri CSS Kutu Hizalama’da [CSS-ALIGN-3] tanımlanmış olsa da, Flexible Box Düzeninde, spesifikasyonun ilerlemesini yavaşlatabilecek normatif bir bağımlılık yaratmamak için burada ilgili olanların tanımları yeniden üretilmektedir. Bu özellikler, CSS Kutu Hizalama Düzey 3 tamamlanıncaya ve diğer düzen modları için etkileri tanımlanıncaya kadar yalnızca flex düzeni için geçerlidir. Ayrıca, Kutu Hizalama modülünde tanımlanan tüm yeni değerler Flexible Box Layout için geçerli olacaktır; başka bir deyişle, Kutu Hizalama modülü tamamlandığında buradaki tanımların yerini alacaktır.”
Bu serinin daha sonraki bir makalesinde – Öğeleri flex konteynerinde hizalama – Kutu Hizalama özelliklerinin flex öğelerine nasıl uygulandığını ayrıntılı olarak inceleyeceğiz.
Yazma Modları
Flexbox’ın temel kavramları makalesinde, flexbox’ın yazma moduna duyarlı olduğunu açıklamıştık. Yazma modları, CSS’in uluslararası olarak var olan çeşitli farklı yazma modlarını nasıl desteklediğini detaylandıran CSS Yazma Modları spesifikasyonunda tamamen ayrıntılı olarak açıklanmıştır. Yazma modu, belgemizde blokların yerleştirilme yönünü değiştirdiğinden, bunun flex düzenlerimizi nasıl etkileyeceğinin farkında olmamız gerekir. Blok ve satır içi yönlerini anlamak yeni düzen yöntemlerinin anahtarıdır.
Not: Farklı bir yazma modu kullanan bir dilde içerik yayınlamaktan başka nedenlerle belgemizin yazma modunu değiştirmek isteyebileceğimizi belirtmek gerekir.
Yazma modları
Yazma modları belirtimi, writing-mode özelliğinin aşağıdaki değerlerini tanımlar; bu değerler, içerik söz konusu yazma modunda biçimlendirildiğinde, blokların sayfaya yerleştirilme yönünü değiştirir. Flex düzenine ne olduğunu görmek için aşağıdaki örneği bu modlarla değiştirmeyi deneyebilirsiniz.
horizontal-tbvertical-rlvertical-lrsideways-rlsideways-lr
.box {
display: flex;
writing-mode: horizontal-tb;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>sideways-rl ve sideways-lr’nin şu anda yalnızca Firefox’ta desteklendiğini unutmayın. Ayrıca yazma modu ve flexbox ile ilgili bilinen bazı sorunlar da mevcuttur. Tarayıcı desteği hakkında daha fazla bilgi için MDN writing-mode belgelerine bakabilirsiniz. Bununla birlikte, düzeninizde yazma modlarını kullanmayı planlıyorsanız, sonuçları dikkatlice test etmeniz önerilir – en azından okunması zor şeyler yapmaktan kaçınmak için!
Normalde bir belgenin tamamını başka bir yazma moduna değiştirmek için CSS ve writing-mode özelliğini kullanmayacağınızı unutmayın. Bu, belge dilini ve varsayılan metin yönünü belirtmek için html öğesine bir dir ve lang niteliği ekleyerek HTML aracılığıyla yapılacaktır. Bu, CSS yüklenmemiş olsa bile belgenin doğru görüntüleneceği anlamına gelir.
Flexbox ve diğer düzen yöntemleri
Flexbox belirtimi, bir öğenin başka bir düzen yöntemi kullanması ve ardından flex öğesi haline gelmesi durumunda ne olacağına ilişkin bir tanım içerir. Örneğin, bir öğe kaydırılmışsa ve ardından üst öğesi bir flex konteyner haline gelirse. Ya da flex konteyner mizanpajın bir parçası olarak nasıl davranır.
display: flex olarak ayarlanmış bir öğe, çoğu yönden, herhangi bir kapsayıcı blok gibi davranır. Kayan öğeler araya girmez ve kapsayıcıların kenar boşlukları daralmaz.
Flex öğeleriyle ilgili olarak, bir öğe kaydırılmış veya kaydırması temizlenmişse ve daha sonra üst öğeye display: flex uygulandığında bir flex öğesi haline gelir. Bu durumda kaydırma ve temizleme artık gerçekleşmez ve öğe, kaydırmalarda olduğunun aksine normal akıştan çıkarılmaz. Hizalama için inline-block veya tablo düzeninde kullanılan vertical-align özelliğini kullandıysanız, bu artık öğeyi etkilemeyecektir. Bunun yerine flexbox’ın hizalama özelliklerini kullanabilirsiniz.
Bir sonraki canlı örnekte, alt öğeler kaydırılmış (float) ve ardından kapsayıcılarına display: flex eklenmiştir. display: flex öğesini kaldırırsanız, .box öğesinin çöktüğünü görürsünüz, çünkü herhangi bir temizleme uygulanmamıştır. Bu, kaydırmanın gerçekleştiğini gösterir. display: flex öğesini yeniden uyguladığınızda çökme gerçekleşmez. Bunun nedeni, flex öğelerine dönüştürüldükleri için öğelere artık float uygulanmamasıdır.
.box>* {
float: left;
}
.box {
display: flex;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>Flexbox ve Grid Düzeni
CSS Izgara Düzeni ve Flexbox, diğer yöntemlerin üzerine yazma konusunda genellikle aynı şekilde hareket eder. Bununla birlikte, eski tarayıcılarda flexbox için daha iyi destek olduğundan, ızgara düzeni için flexbox’ı yedek olarak kullanmak isteyebilirsiniz. Bu yaklaşım çok iyi çalışır. Bir flex öğesi bir grid öğesi haline gelirse, alt öğelere atanmış olabilecek flex özellikleri yok sayılır.
Kutu Hizalama özelliklerini her iki düzen yönteminde de kullanabilirsiniz, bu nedenle ızgara düzeni için flexbox’ı yedek olarak kullanmak çok iyi çalışabilir.
Flex ve grid – aralarındaki fark nedir?
Sıkça sorulan bir soru Flexbox ve CSS Izgara Düzeni arasındaki farkın ne olduğudur – neden bazen aynı şeyi yapıyormuş gibi görünen iki spesifikasyonumuz var?
Bu sorunun en açık cevabı spesifikasyonlar içinde tanımlanmıştır. Flexbox tek boyutlu bir düzen yöntemiyken Grid Layout iki boyutlu bir düzen yöntemidir. Aşağıdaki örnek bir flex düzenine sahiptir. Temel kavramlar makalesinde daha önce açıklandığı gibi, flex öğelerinin sarılmasına izin verilebilir, ancak bunu yaptıklarında her satır kendi başına bir flex konteyneri haline gelir. Alan dağıtıldığında flexbox diğer satırlardaki öğelerin yerleşimine bakmaz ve öğeleri birbiriyle hizalamaya çalışır.
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 200px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
</div>Grid kullanarak çok benzer bir düzen oluşturduğumuzda, düzeni hem satırlarda hem de sütunlarda kontrol edebiliriz.
.box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, auto));
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
</div>Bu örnekler, bu yerleşim yöntemleri arasındaki bir başka önemli farka da işaret eder. Izgara Düzeninde, boyutlandırma özelliklerinin çoğunu kapsayıcı üzerinde yapar, parçaları ayarlar ve ardından öğeleri bunlara yerleştirirsiniz. Flexbox’ta, bir flex container oluşturup yönü bu düzeyde ayarlarken, öğe boyutlandırması üzerindeki herhangi bir kontrolün öğelerin kendisinde gerçekleşmesi gerekir.
Bazı durumlarda her iki düzen yöntemini de memnuniyetle kullanabilirsiniz. Ancak her ikisinde de kendinize güvendikçe, her birinin farklı düzen ihtiyaçlarına uygun olduğunu göreceksiniz. Sonunda CSS’nizde her iki yöntemi de kullanacaksınız. Unutmayın, nadiren doğru ya da yanlış bir cevap vardır.
Temel bir kural olarak, sarılmış bir flex konteynerin bir satırındaki öğeleri üstlerindeki öğelerle aynı hizaya getirmek için flex öğelerine genişlik ekliyorsanız, gerçekten iki boyutlu düzen istiyorsunuz demektir. Bu durumda bileşenin CSS Izgara Düzeni kullanılarak düzenlenmesi daha iyi olacaktır. Küçük bileşenler için flexbox, büyük bileşenler için ızgara düzeni kullanmanız gerektiği anlamına gelmez; küçük bir bileşen iki boyutlu olabilir ve büyük bir düzen tek boyutlu düzenle daha iyi temsil edilebilir. Bir şeyler deneyin – artıkdüzen yönteminde birden fazla seçeneğimiz var, bu yüzden bundan yararlanın.
Izgara ve flexbox ile ilgili daha fazla karşılaştırma için Izgara Düzeninin diğer düzen yöntemleriyle ilişkisi makalesine bakın. Bu makale, Izgara Düzeni’nin esnek düzenden farklı olduğu birçok yolu ayrıntılarıyla açıklar ve Izgara Düzeni’ni kullanırken elde edeceğiniz öğelerin ızgara üzerinde katmanlanması gibi bazı ekstra işlevleri gösterir. Bu, hangi düzen yöntemini kullanacağınıza karar vermenize de yardımcı olabilir.
Flexbox ve display: contents
Display özelliğinin contents değeri, spesifikasyonlarda aşağıdaki gibi açıklanan yeni bir değerdir:
“Öğenin kendisi herhangi bir kutu oluşturmaz, ancak alt öğeleri ve sözde öğeleri normal şekilde kutu oluşturmaya devam eder. Kutu oluşturma ve mizanpaj açısından, öğe, belge ağacındaki alt öğelerle ve sözde öğelerle değiştirilmiş gibi ele alınmalıdır.”
Bu display değeri, kutu üretimini ve elemanın sayfada stil verip görebileceğimiz bir kutu oluşturup oluşturmayacağını ya da bunun yerine normalde oluşturacağı kutunun kaldırılıp kaldırılmayacağını ve alt elemanların esasen ebeveynin parçası olduğu düzen yöntemine katılmak için yukarı taşınıp taşınmayacağını kontrol eder. Bunu bir örnekle görmek çok daha kolaydır.
Aşağıdaki örnekte, üç alt öğesi olan bir flex konteynerimiz var. Bu flex öğelerinden birinin içinde, normalde flex düzenine katılmayan iki öğe var. Flex düzeni yalnızca bir flex konteynerinin doğrudan alt öğeleri için geçerlidir.
İç içe geçmiş öğelerin etrafındaki sarmalayıcıya (.nested classına sahip öğe) display: contents ekleyerek, öğenin düzenden kaybolduğunu ve iki alt çocuğun flex konteynerin doğrudan çocuklarıymış gibi düzenlenmesine izin verdiğini görebilirsiniz. Eski haline döndürmek için display: contents satırını kaldırmayı deneyebilirsiniz.
Bunun yalnızca kutuyu düzenden kaldırdığına dikkat edin; alt çocuklar başka hiçbir şekilde doğrudan çocuk haline gelmez. Flex öğelerine arka plan ve kenarlık eklemek için doğrudan alt öğe seçici kullandığımdan, bunun iç içe geçmiş alt öğelerimize uygulanmadığını görebilirsiniz. Bunlar flex öğeleri olarak düzenlenmiştir, ancak doğrudan alt öğe olmadıkları için diğer stilleri alamazlar.
Uyarı: Çoğu tarayıcıdaki mevcut uygulamalar, display: contents içeren herhangi bir öğeyi erişilebilirlik ağacından kaldıracaktır (ancak torunları kalacaktır). Bu, öğenin kendisinin artık ekran okuma teknolojisi tarafından duyurulmamasına neden olacaktır. Bu, spesifikasyonlara göre yanlış bir uygulamadır.
Ayrıca, kutuyu kaldırdıktan sonra – örneğin – iç içe geçmiş alt çocukların arkasına bir arka plan rengi eklemek için kutuyu kullanamazsınız. Bu örnekte display: contents öğesini kaldırırsanız, kaldırdığımız doğrudan alt öğenin turuncu bir arka plan rengine sahip olduğunu göreceksiniz. Kutu kaybolduğunda bu da kaybolur.
.box {
display: flex;
}
.nested {
background-color: orange;
display: contents;
} <div class="box">
<div>One</div>
<div>Two</div>
<div class="nested">
<div>Sub-item 1</div>
<div>Sub-item 2</div>
</div>
</div>Display:contents için tarayıcı desteği sınırlıdır ve bu örneğin çalışması için gereklidir. Firefox zaten display:contents’i destekler ve değer Chrome’da da uygulanmaktadır. Daha iyi bir tarayıcı desteği olduğunda, bu özellik anlamsal nedenlerle işaretlemeye ihtiyaç duyduğunuz, ancak varsayılan olarak oluşturacağı kutuyu görüntülemek istemediğiniz durumlarda çok yararlı olabilir.