Divi 5'in Flexbox Düzen Sistemine geçerken kaçınılması gereken 5 tuzak

Divi 5 yeni Flexbox tabanlı düzen sistemini gönderdi. Divi 4'ün eski blok düzen motorunun yerini alır ve görsel yapımcının güçlü yeni kontrollerinin kilidini açar. Artık her yeni satır varsayılan olarak Flex Düzeni. CSS Flexbox'ı zaten kullanmadığınız sürece, bu değişiklik yeni bir tasarım zihniyeti gerektirir çünkü Flex farklı çalışıyor. Alışkanlıklarınızı ayarlamazsanız, sıkışırsınız.

Bu güncelleme, sarma, yön, aralık, sipariş ve hizalama için görsel kontroller sağlar - hepsi yerleşik. Hacky Custom CSS yok. Ayrıca, ekran ayarlarının minimum ayarlanmasıyla karmaşık satır yapıları oluşturmak için önceden yapılandırılmış satır kısayolları ile birlikte gelir. Özellik ve tam genişlikte bölümler gibi bazı blok tabanlı özellikler kullanımdan kaldırılmıştır, çünkü Flex artık tüm bu kullanım durumlarını kapsamaktadır.

Bu yazı, zihinsel modelinizi bloktan divi 5'e değiştirirken vuracağınız en büyük beş tuzağa giriyor.

Pitfall #1: Flex'i bir blok zihniyetine zorlamak

→ Flex sadece yeni kontroller değil, yeni bir zihinsel model gerektirir.

Hiç kimse çok gerçek sınırlamalara ulaştıklarını bilmedikçe değişimi sevmez. Birçoğu için, eski düzen sistemi bildikleri ve rahat oldukları şeydir. Ama sınırlamaları vardı. CSS hakkında yeterince bilenler, eski sistemin Flexbox'ın düzeltmek için tasarlandığı şeyleri eksik olduğunu biliyorlardı. İlk tuzaktan kaçınmak, Flexbox'ın sadece ekstra seçeneklere sahip bir blok düzeni olmadığını anlamayı gerektirir.

Divi 4'te, modüller varsayılan olarak dikey olarak yığılmıştır - her eleman önündeki bir öğe oturdu. Bir şeyleri sütunlarla yatay olarak istifleyebilirsiniz, ancak bu noktada, bir düzen oluşturmak için bir bölümün içindeki birden fazla satır + sütunla çalışırsınız. Bu, birçok kişi için öngörülebilir ve rahattı, ancak aynı zamanda iki düğmeye yan yana ve diğer tasarım zorluklarına sahip olamamanın sinir bozucu gerçekliğine yol açtı.

Divi 5 şimdi farklı çalışıyor, çünkü yeni kaplar (yani bölümler, satırlar, sütunlar ve gruplar) varsayılan olarak “esnek” olarak ayarlanmıştır. Çocuk elemanlarını düzenlemek için konteyner düzeyinde daha spesifik seçenekler elde edersiniz. Flexbox güçlüdür, çünkü elemanların mevcut alana ve içindeki içeriğe göre konumlandırıldığı esnek düzenlere izin verir. Bir sonraki tuzakta daha fazlası . Bu, düzenlerin sabit veya mutlak konumlandırmaya güvenmeden değişen ekran boyutlarına ve içeriğine uyum sağlamasını sağlar. İşte Flex'i blokla karşılaştırmak için bir örnek.

Blok düzeni yığın modülleri blok ekseni boyunca dikey olarak. FlexBox, ana eksen olarak satır ve sütun arasında seçim yapmanızı sağlar.

Kullanıcı arayüzündeki her ayar ve seçenek, her bir kabına eklenen gerçek CSS özelliklerine doğrudan karşılık gelir.

Pitfall #2: Flex büzülmesini ve büyüdüğünü bilmemek, çocuk elemanı boyutlandırmasına nasıl uyuyor

→ Büzülmeden ve büyümeden, düzenleriniz beklendiği gibi davranmaz.

Divi 5'teki Flex ile çocuk modülleri belirli bir genişliğe veya yüksekliğe sahip olabilir. Ayrıca, kabın içindeki odaya bağlı olarak küçülebilir veya doldurabilir (genişlikleri veya yükseklikleri). Bu örnekte, metin modülleri% 45 genişliğe ayarlanmıştır, yani iki modül aynı satırda olduğu gibi yatay olarak sığacaktır. Ancak tek sayıda metin modülü eklersek, boş alan olmasını istemiyoruz. Bu modülleri Flex büyümesine sahip olacak şekilde ayarlayabiliriz ve daha sonra arka arkaya kullanılabilir alan olduğunda, bu modüller doldurmak için büyüyecektir.

Divi, herhangi bir esnek kap içindeki çocuk elemanlarında “Dolgulamak için Büyümek”, “Uygun Büzülme” ve Özel Ayarlar gibi kontrolleri ortaya çıkarır (Çocuk Elemanı> Tasarım> Boyutlandırma> Doldurmak, sığacak şekilde büzülmek veya özel ).

Düzenleri engellemeye alışkınsanız, çocuk öğelerinde yükseklik ve genişlik ayarlamak tanıdık gelir. Ancak FlexBox ile büyüyen ve büzülme ayarları, sabit boyutlandırmayı duyarlı davranışlarla birleştirmenizi sağlar - her kaptaki mevcut alana uyum sağlar. Karmaşıklık ekler, ancak çok daha fazla esnekliğin kilidini açar.

Doldurmak için sığdırmak ve büyümek için büzülme (esnek-temellere ek olarak), duyarlı düzenler oluşturmanıza yardımcı olmakta da çok kullanışlıdır. Blok düzenlerinin sık sık duyarlı olması için, bu kesme noktalarının her birinde birden fazla kesme noktası ve genişlik/yükseklik ayarlamanız gerekir. Flexbox, çeşitli kesme noktalarındaki benzersiz ayarlardan yararlanabilir, ancak adından da anlaşılacağı gibi, çok esnektir . Bu özellikle tipografi için CLAMP () kullanılırken geçerlidir. Her ikisini birlikte kullanmak, diğer göreceli CSS birimleri ile birlikte, sürekli kesme noktalarına olan ihtiyacınızı bozacaktır.

Flexbox ile inşa edilmiş başka bir örneğe bakalım.

Sütun kapsayıcısı (üst) bu ayarlarla esneyecek şekilde ayarlanmıştır:

• Yatay ve dikey boşluk : 30px (Bu, biraz daha iyi olmak için calc veya kelepçe kullanabilir)
• Düzen Yönü : Satır Tersine (Tuzak #4'te bu kararın açıklaması)
• İçeriği haklı çıkarın : Merkez
• Öğeleri Hizalayın : Merkez
• Flex Wrap : Wrap Ters (bu kararın açıklaması Pitfall #4)

Daha sonra sütunun içine üç çocuk öğesi yerleştirdim. Bir başlık modülü, bölücü modülü ve bir metin modülü. İşte her biri için ilgili ayarlar:

• Başlık modülü
  • Metin Boyutu : Kelepçe (2REM, 1.5REM + 2VW, 3REM)
  • Genişlik : Otomatik
  • Flex Boyutu : Uygun Büzülme
• Bölücü modülü
  • Genişlik : Otomatik
  • Flex Boyutu : sığacak ve doldurmak için büyüyecek
• Metin modülü
  • Metin Boyutu : Kelepçe (0.9375REM, 0.75REM + 0.4VW, 1REM)
  • Genişlik : Otomatik
  • Flex Boyutu : Uygun Büzülme

Bir satır esnek yönü ile, çocuk öğeleri yer olduğunda yatay olarak sıralanır. Metin modülü en geniş olanıdır, bu yüzden kendi satırını doldurur. Bölücü modülü daha sonra otomatik genişliğe sahip olduğu ve hem esnek büyüme hem de esnek-shrink etkinleştirildiği için büyür veya büzülür. Başlık modülü yalnızca iç genişliğini kullanır ve kompakt kalır. Bu kurulum, herhangi bir kesme noktası olmadan tamamen duyarlı bir düzen verir.

PITFAL #3: Marj Alışkanlığını Kırmamak

→ Bunun yerine boşluk kullanın - daha akıllı, daha temiz ve Flex için yapılmıştır.

Divi 4'te, modüller ve diğer elemanlar arasındaki görsel boşluklar kenar boşlukları gerektirir (alt kenardan dikey boşluklar, sol/sağ kenar üzerinden yatay boşluklar). Boşluk sütun aralığına uygulandığında, Divi 4'ün bir oluk ayarı vardı, ancak standart CSS değerlerini almadı ve aslında boşluğu oluşturmak için sütunların kenarlarına marj kullandı. Bu, blok düzenlerinin hala çalıştığı gibi. Ama şimdi daha temiz, daha etkili bir yaklaşım var.

Divi 5'in FlexBox sistemi, tasarım> düzeni > yatay ve dikey boşluk altında satır ve dikey boşluk kontrolleri sunar. Bu CSS boşluğu ve satır boşluğu haritası. Dikey boşluklar, öğeler yeni bir çizgiye sarıldığında her "esnek satır" a otomatik olarak uygulanır. Aynı şey yatay boşluklar için de geçerlidir: yan yana çocuk öğeleri olduğunda, boşluk mevcut olacaktır. Bu boşluk ayarları ayrıca herhangi bir pozitif CSS ünitesini kabul eder, böylece duyarlı boşluk arazileri oluşturmak için Clamp () veya Calc () kullanabilirsiniz.

Bu, her bir çocuk öğesine marj değerleri uygulama ihtiyacını azaltır. Boşluk ayarı, herhangi bir boşluğu otomatik olarak uygulamak için esnek yöne ve konteynerdeki çocuk sayısına göre otomatik olarak uyum sağlar. Marjların hala yeri var, ancak bir konteynerin içindeki boşluk elemanlarına ihtiyaçları azalıyor.

Pitfall #4: Ters akış ve sipariş kontrollerinin alt kullanımı

→ Görsel sipariş ve anlamsal sıranın eşleşmesi gerekmez.

Varsayılan olarak, esnek bir kaptaki alt öğeler kaynak sıralarında görüntülenir. Flexbox ve Divi 5, elemanların HTML sıralamasını değiştirmeden elemanların görsel akışını değiştirmek için ters esnek yönleri ve sipariş kontrollerini belirleme yeteneği verir.

Düzen yönünün altındaki ters yön değiştirme, elemanların sırasını satır veya sütun yönündeki tersine çevirmenizi sağlar. Pitfall #2'deki düzen örneğine tekrar bakmak için bunu neden istediğimizi görebiliriz. Katmanlar görünümünde, çocuk öğelerinin sırasının başlık, sonra bölücü ve son olarak metin modülü olduğunu görebilirsiniz. Anlamsal olarak, yığının üstünde başlığın (bu durumda bir H2) olması ekran okuyucuları için mantıklıdır. Bununla birlikte, metin boyutuyla görsel bir hiyerarşiyi kullandığımız için, başlık görsel olarak yeterince görsel olarak açıktır.

Satır tersini esnek yön olarak kullanmak ve Wrap Reverse HTML sıralamasını (erişilebilirlik için önemli) korurken, aynı zamanda onları nasıl öngördüğümüzü tasarlamama izin verir.

Aynı şeyi bir çocuk öğesinin ayarları> İçerik sekmesi> siparişine tıklarken Divi'de bulunan çocuk elemanı siparişini kullanarak başarabilirsiniz. Sadece bu öğenin görüneceği sırayı değiştirebiliriz. Bu örnekte, aynı sonuca ulaşıyoruz, ancak farklı bir ortamla - bazıları için daha mantıklı olabilecek bir ortam.

Pitfall #5: sarmayı ayarlamayı unutmak

→ Flex, siz söylemedikçe yeni satırlara girmez.

Daha önce sarıldıktan bahsettik, ancak kendi bölümünü hak ediyor. Yeni esnek kaplar varsayılan olarak sargı yok. Bunun beklenmedik sonuçları olabilir. Örneğin, her biri% 50 genişlikte olmak üzere dört alt modül eklerseniz, iki esnek sırada gösterilmelerini beklersiniz. Sorununuz, konteynerinizin sarılmasına izin vermeniz gerektiğidir.

Divi , üç durumu olan düzen ambalajı adı verilen bir geçiş içerir: yok, sarma ve wrap-remer. Modüllerin bir eşikte yeni çizgilere kırılmasını istiyorsanız sargıyı etkinleştirmelisiniz. Divi, tek bir kap içindeki çoklu sıralı yapıları bu şekilde destekler (iç içe veya birden fazla satır bunu şimdi yapmanın tek yolu değildir).

Flexbox Master'a zaman ayırın

Flex in Divi 5, Divi'nin önceki blok düzenli düzen sisteminden daha güçlüdür. Ancak, biraz öğrenmeyi anlamayı gerektirir. Flexbox, Divi'ye özgü bir ayar değildir, bu nedenle bu CSS aracının nasıl çalıştığının temellerini bilmeniz önemlidir. CSS'de uygulayabileceğiniz tüm ayarlar doğrudan düzenleyicide mevcut olduğundan Divi uygulamayı kolaylaştırır. Ancak konsept bloktan çok farklı.

Bu farklılıklar nedeniyle, Flexbox'ı anlamak için etkileşimli bir öğretim aracı kullanarak bir saat geçirmenizi şiddetle tavsiye ediyoruz. Kullanımı kolay olan ve gerçekten hile yapan flexboxfroggy.com. Size tüm temel bilgileri öğreterek 24 kademeli karmaşık zorluklara yol açar. Bir saat boyunca doomcrolling yapmaktan çok daha iyi.

Bugün Divi 5 ile Flex kullanın

Divi 5'teki Flexbox dürüst. Ne istediğini tahmin etmiyor. Sizden karar vermenizi ister. Ancak karar verdikten sonra esneklik gelir. Her düzen yapısını, özel CSS veya hack'ler olmadan sorumlu, duyarlı ve güvenilir bir şekilde - hatta sonsuz iç içe - oluşturabilirsiniz.