Flexbox nedir (ve neden kullanmalısınız)

Bütün gün temiz bölümler oluşturabilirsiniz, ancak her ekran boyutunda öğeleri hizalamak, kasıtlı tasarımdan daha fazla deneme yanılma gibi hissetmeye başlayabilir.

Flexbox bunu düzeltir. Elemanların sürekli olarak, kenar boşluklarını ve dolguları ayarlamadan nasıl oturduğunu, germe, büzülme ve sarma nasıl üzerinde bir kontrol sağlar. Bu kılavuzda, Flexbox'ın nasıl çalıştığını, düzenleri nasıl basitleştirdiğini ve tek bir kod satırı yazmadan Divi 5'in içinde görsel olarak nasıl kullanılacağını bozacağız.

Flexbox nedir

Esnek kutu düzeni için kısa olan FlexBox, öğelerin kendilerini bir konteyner içinde nasıl hizaladığını ve boşluklarını basitleştiren bir düzen modelidir. Flexbox, her bir öğeyi marjları veya sabit genişlikleri kullanarak manuel olarak konumlandırmak yerine, bu öğelerin mevcut alana bağlı olarak nasıl davranması gerektiğini tanımlamanızı sağlar.

Ekstra odayı doldurmak için unsurlar büyümeli mi? Alan sıkı olduğunda küçülüyor mu? Artık uymadıklarında bir sonraki satıra sarılmalı mı? Bu seçimleri konteynere ve çocuklarına uyguladığınız bir dizi özellik aracılığıyla yaparsınız. Düzeninizin nasıl yanıt vermesi gerektiğine karar verirsiniz.

Bunu anlamak için pratik örnekler alalım. Yatay bir satırın içinde üç düğmeniz olduğunu varsayalım. Flexbox ile hepsini kabın içinde eşit olarak ortalayabilirsiniz:

Orta düğmenin diğerlerinden daha fazla yer kaplaması gerektiğine karar verin:

Veya ekran daha dar hale geldiğinde düğmelerin otomatik olarak istiflenmesini isteyebilirsiniz:

FlexBox, tüm bunları haklı-içerik, esnek-sarma ve flex-grow gibi basit özelliklerle mümkün kılar.

Buna ek olarak, üreticideki gerçek konumlarını değiştirmeden öğelerin nasıl aralıklı, farklı eksenler üzerinde hizalandığını ve görsel olarak sipariş edildiğini kontrol etmenizi sağlar. İçeriği ortalayabilir, kabın üstüne veya altına itebilir, bir öğeyi diğerlerinden farklı şekilde hizalayabilir veya hatta tüm sırayı kesme noktaları boyunca tersine çevirebilirsiniz.

Düşünebilirsiniz: Bunu zaten kenar boşlukları ve dolgu ile yapamaz mıyım?

Haklısın. Elemanları manuel olarak ortalayabilir veya boyutlarını özel genişliklerle ayarlayabilirsiniz. Bununla birlikte, bu yöntemler her öğeyi ayrı ayrı konumlandırmaya dayanır. Her ekran boyutu için her öğeyi teker teker ayarlıyorsunuz.

Flexbox bu işlemi tamamen değiştirir. Her öğeyi ayrı ayrı tedavi etmek yerine, düzen kurallarını bir kez konteyner düzeyinde tanımlamanıza olanak tanır. Konteynere çocuklarının farklı senaryolarda nasıl davranması gerektiğini söylersiniz ve bunları gerektiği gibi ayarlar.

Bu yaklaşım, özellikle ekran boyutları değiştiğinde veya yeni modüller eklendiğinde, tasarımlar geliştikçe, düzenleri daha tutarlı, yönetilmesini daha kolay ve daha esnek hale getirir.

Esnek yön nasıl hizalamayı etkiler?

Flexbox'ta yaptığınız ilk seçeneklerden biri, arka arkaya veya sütunda, öğelerin akması gereken yöndür. Flex yönlendirme özelliği bunu ayarlar ve öğelerin kabın içinde nasıl hizalandığını, sarılmasını ve boşluğuna nasıl yerleşir.

Bunu daha iyi anlayalım, çünkü haklı ve hizalama gibi ortak özellikler tamamen hangi yönün ayarlandığına bağlıdır. Tarayıcının varsayılan düzeninde çalışmazlar, ancak Flexbox tarafından oluşturulan eksenler: ana eksen ve çapraz eksen . Ana eksen, esnek yönlendirme ile ayarladığınız yönü takip eder: sıralar için yatay, sütunlar için dikey. Çapraz eksen diğer yoldan gider: sıralar için dikey, sütunlar için yatay.

Böylece, yön satıra ayarlandığında ana eksen soldan sağa doğru çalışır. Bu, elemanları satır boyunca haklı çıkarmak anlamına gelir ve hizalanma öğeleri, o satırda dikey olarak nasıl hizalandıklarını kontrol eder.

Ve yönü sütuna değiştirdiğinizde, tüm hizalama mantığı döndürür. Ana eksen şimdi yukarıdan aşağıya doğru çalışır, yani haklı-içerik öğeleri dikey olarak hizaladığı anlamına gelir ve hizalanma öğeleri konumlarını soldan sağa ayarlar.

İlk başta biraz kafa karıştırıcı hissedebilir, ancak ana ve çapraz eksenlerin yöne nasıl tepki verdiğini görünce tıklar. Desenleri tespit etmeye başlayacaksınız ve düzen kararları daha sezgisel hissedecek. Uygulama yaparken şeyleri iki kez kontrol etmek istiyorsanız aşağıda hızlı bir referans tablosu da var.

Sözdizimi ve Ortak Flexbox Özellikleri

FlexBox'ı etkinleştirmek için bir kabın ekran özelliğini bloktan esnekliğe değiştirin. Bunu yaptığınızda, tarayıcı satırlar, düğmeler, kartlar veya simgeler gibi iç öğeleri esnek öğeler olarak tedavi etmeye başlar.

.container {
display: flex;
}

Oradan, davranışları kontrol etmek için farklı FlexBox özellikleri kullanıyorsunuz. Örneğin, Justify-Content, öğelerin ana eksen boyunca nasıl aralıklı olduğuna karar verir (bu varsayılan olarak, esnek yönlendirme: satır) olarak yatay olarak ayarlanır) . Eşyaları sola, sağa doğru itmek için esnek uç, merkezlemek için merkeze veya uzay ve uzay-uzayda eşit olarak yaymak için Flex-Star'ı kullanın.

Varsayılan olarak, Flexbox tüm öğeleri bir satıra sığdırmaya çalışır. Çok fazla varsa, esnek shrink ayarlarına göre sığmayacaklar ve yeterince küçülemezlerse, kabı taşabilirler. Bunu önlemek için esnek sargıyı açın, böylece öğeler birine tıkmak yerine yeni bir çizgiye geçin.

Bu iki özelliğin düzen sorunlarını çözebileceği birçok kullanım durumunu zaten düşünebilirsiniz. Ancak çok daha fazlası var ve her biri size boyut, düzen, hizalama ve aralık üzerinde özel kontrol sağlar.

Bunların gerçekte nasıl eğlenceli, uygulamalı bir şekilde çalıştığını merak ediyorsanız, Flexbox Froggy'yi deneyin. Kurbağaları bir göletin etrafında hareket ettirmek için gerçek Flexbox kodu uyguladığınız eğlenceli bir küçük oyun. Yol boyunca, tahmin etmeyi bırakırsınız ve her mülkün ne yaptığını tam olarak tanımaya başlarsınız.

Neden FlexBox kullanıyor

Şimdiye kadar, Flexbox'ın düzenlerin alana nasıl tepki verdiğini nasıl değiştirdiğini gördünüz. Ancak gerçek değer, bu değişimin daha kolay yapmanıza izin verdiği şeyden gelir. Flexbox inatçı düzen zorluklarını basit, yeniden kullanılabilir desenlere dönüştürüyor.

• Basitleştirilmiş Hizalama: Marj ayarlarına veya yardımcı sınıflarına güvenmeden haklı-içerik ve hizalama merkezi veya boşluk öğeleri gibi özellikler.
• Varsayılan olarak duyarlı: öğeler doğal olarak büyür, büzülür veya alanlarına bağlı olarak sarılır. Bu, ek kesme noktaları olmadan uyum sağlayan temizleyici düzenler ile sonuçlanır.
• Otomatik Boşluk ve Boyutlandırma: Elemanların, Flex Grow, Flex-Shrink ve Flex-Basis gibi özelliklerle nasıl yer paylaştığını kontrol ederek, düzeni yerine yerleşim sıvısını yaparsınız.
• HTML'yi değiştirmeden yeniden sıralama: HTML'ye dokunmadan öğelerin görsel sırasını değiştirebilirsiniz. Düzen farklı ekranlar için ayarlanırken yapı temiz kalır.
• Daha az düzen hackleri: Artık şamandıralara, temizliklere veya yükseklik eşleşen komut dosyalarına ihtiyacınız yok. Flexbox, modern, güvenilir seçeneklerle değiştirir.

Ve tüm büyük tarayıcılarda desteklendiği için Flexbox sadece verimli değil, aynı zamanda güvenilirdir. Bu, onu gerçek dünya projeleri için modern, daha güvenilir bir seçim haline getirir.

Flexbox neden genellikle ızgaradan daha iyidir?

Grid, Flexbox gibi bir başka popüler düzen sistemidir. Bununla birlikte, her ikisi de farklı kullanım durumları için inşa edilmiştir.

Örneğin, ızgara, hem satırlar hem de sütunlar üzerinde kontrole ihtiyacınız olan iki boyutlu düzenler için tasarlanmıştır. Ürün gösterileri, resim galerileri ve dergi tarzı editoryal düzenler, her iki eksende sıkıca hizalanmış bir yapıya dayandığı için ızgara örnekleridir.

Izgarayı tanımlayarak başlarsınız: kaç satır ve sütun var ve her birinin ne kadar geniş veya uzun olması gerektiği. Sonra her öğeyi bu yapıya yerleştirirsiniz.

Bu bir ızgara düzeni. Öğeler her iki eksende de hizalanmıştır: sabit aralık ve oranlarla satırlar ve sütunlar.

Ancak her düzenin bu planlama seviyesine ihtiyacı yoktur.

Çoğu zaman, UI bölümleri tek bir yönde akar. Kart sıraları, ikon artı metin blokları ve navigasyon bağlantıları iki değil bir ekseni takip eder. Flexbox'ın tam olduğu yer burası.

Bir FlexBox düzeninde, kartlar bir yönde (satır veya sütun) hizalanır ve daha sonra konteyner kurallarına göre sarılır ve aralıklıdır.

Tüm düzeni önceden haritalamak zorunda değilsiniz. Konteynere, öğelerin tek bir eksen boyunca nasıl davranması gerektiğini söylersiniz ve Flexbox bunu işler.

Bu nedenle, gerçekten sert bir ızgaraya bağlı bir şey tasarlamadığınız sürece, Flexbox genellikle daha hızlı, daha basit ve daha esnek bir seçim olacaktır.

Divi 5'te Flexbox

Flexbox hakkında şimdiye kadar öğrendiğimiz her şey harika, ancak her düzen tweak için özel CSS yazmak, özellikle sitenizi Divi gibi görsel bir oluşturucu kullanarak inşa ettiyseniz yapmak istediğiniz şey değil.

Bu nedenle Divi 5 artık yerleşik esnek kutu kontrolleri içeriyor. Artık sekmeleri değiştirmenize veya CSS eklemenize gerek yok. Tüm bunlar ve hatta gelişmiş düzen davranışları artık görsel oluşturucuya, eksi kodlamaya ve ezici bir arka uç içine yerleştirildi.

YouTube kanalımıza abone olun

Uzun lafın kısası, sözdizimini veya özellik adlarını hatırlamanıza gerek yok, sadece arayüzden ne istediğinizi seçin. Herhangi bir bölüme, satıra veya sütuna tıklayın, Tasarım sekmesine gidin ve Düzen> Düzen stili altında Flex kullandığınızdan emin olun.

Bu yeni bir düzen kontrolü seti açar. Bunlar genellikle CSS'de yazacağınız temel Flexbox özellikleridir, ancak şimdi tıklanabilir seçenekler olarak. Değişiklikleri canlı test edebilir ve içeriğinizin nasıl tepki verdiğini görebilirsiniz.

Bu nedenle, hiç bir FlexBox kodu satırı yazmamış olsanız bile, hiçbir şeyi kaçırmayacaksınız. Divi 5 size aynı kontrol seviyesiyle görsel olarak aynı düzen kontrolünü verir, ancak çok daha kolaydır.

Divi 5'in Flexbox Sistemi hakkında her şeyi öğrenin

Yeni sıra yapıları

Neden diğer web oluşturucular da var? Birçok web oluşturucu bir düzen seçeneği olarak FlexBox'ı sunarken, Divi 5 buna farklı yaklaşıyor. Bu, mevcut bir sistemin üstünde katmanlı bir özellik değildir; Şimdi inşaatçının nasıl çalıştığının çekirdeği.

Tüm düzen motoru temelinde Flexbox ile sıfırdan yeniden inşa edildi. Sonuç olarak, düzen davranışı daha tutarlı ve öngörülebilir hissediyor çünkü kasıtlı olarak tasarlanmış bir düzen mantığını takip ediyor.

Örneğin, Divi 5'e yeni bir bölüm veya satır eklediğinizde, hemen farklı bir şey fark edeceksiniz. Yeni yapılar. Artık her biri varsayılan olarak FlexBox üzerinde çalışır, yani hizalama, aralık ve yanıt verebilirlik başlangıçtan daha akıllıca işlenir.

Eklediğiniz yeni tasarım öğeleri için Flex'i açmanız gerekmeyecek. Ve bunu yaptığınızda, eski bir düzeni düzenlerken, hizalama ve aralık araçlarının yönetilmesi anında daha kolay hale gelir.

Sütunların bir satır içinde nasıl düzenlendiğini değiştirebilirsiniz .

Bu, yeni bir sütun yapısı seçebileceğiniz bir panel açar. Flexbox, aralığı ve hizalamayı otomatik olarak ayarlayarak düzen hemen güncellenir.

Birkaç farklı satır türü eklemeyi ve ekranı yeniden boyutlandırmayı deneyin. Her şeyin nasıl değiştiğini ve parçalanmadan nasıl uyum sağladığını göreceksiniz. Bu, kurucuya pişirilen Flexbox'ın gücüdür, Divi 5'i daha güvenilir ve modern bir seçenek haline getirir.

Flexbox Divi 5'te Nasıl Çalışır?

Başlıyorsanız, Divi 5'te FlexBox kullanırken kendinizi güvende hissetmenize yardımcı olacak hızlı bir adım.

Düzen Kontrolleri

Bir bölümü, satır veya sütunu esnek olarak esnek olarak değiştirdiğinizde, Design> Düzen ayarlarında yeni bir düzen kontrolü seti görünür. Bunlar size her zamanki seçeneklerinizle birlikte görsel FlexBox kontrolü sağlar.

• (1) Düzen stili: Flex'i etkinleştirdiğiniz yer burasıdır. Ayarlandıktan sonra, yön, hizalama ve aralık gibi esnek spesifik seçenekler görünür hale gelir.
• (2) Yatay boşluk: Soldan sağa öğeler arasında boşluk ekler.
• (3) Dikey boşluk: Sütun düzenleri kullanılırken yığılmış elemanlar arasındaki boşluğu ayarlar.
• (4) Düzen yönü: Akış, satır, sütun veya ters yönergeleri değiştirir, böylece öğeler yan yana veya yukarıdan aşağıya hizalanabilir.
• (5) İçeriği haklı çıkarın: öğeleri ana eksen boyunca hizalar. Onları ortalayabilir, bir tarafa itebilir veya yayabilirsiniz.
• (6) Öğeleri hizalayın: Öğeleri çapraz eksen boyunca hizalar, bu da öğeleri yatay bir satırda dikey olarak düzenlerken yararlıdır.
• (7) Düzen ambalajı: Bu, alan bittiğinde öğelerin bir sonraki satıra geçmesine izin verir. Kırmak yerine ekran boyutuna yanıt veren düzenler oluştururken yararlı.

Diyelim ki logoları olan bir marka çubuğunuz var ve daha büyük olmalarını istiyor. Esnek yön satır ve düzen sargısına ayarlandığında, boşluk olmadığında otomatik olarak iki sıraya akarlar.

Elemanları iki satırda hizalamak artık medya sorguları veya manuel çözüm olmadan kolaydır.

Sütun Kontrolleri ve Boyutlandırma

Esnek özellikli bir satırın içine girdikten sonra, her sütunun tasarım> boyutlandırma altında sütun sınıfı adı verilen yeni bir ayarı vardır. Bu, bir sütunun içeriğine ve çevresine göre ne kadar yer kapladığını belirler.

Sıyıra girebileceğiniz (sütunu yalnızca içeriği kadar geniş yapan) veya doldurmak için büyüyebilirsiniz (ekstra alan almak için sütunu uzatır).

Örneğin, bir metin sütununun daha belirgin hissetmesini ve içeriklerine sarılan kart öğelerine sahip olmasını istiyorsanız, kartları sığdırmak için büzülmeye ve metin doldurulması için ayarlarsınız.

Sipariş Kontrolleri

Bir başka güçlü, ancak genellikle gözden kaçan araç, içerik sekmesinin altındaki sipariş ayarıdır. Bu, tel çerçeve veya katman görünümünde düzen yapısını değiştirmeden sütunları ve modülleri görsel olarak yeniden sıralamanızı sağlar.

Belirli bir modülün önce mobil ancak ikinci masaüstünde görünmesini istediğinizi varsayalım. Her kesme noktasında farklı sipariş değerleri atayabilirsiniz.

Flexbox'ın pratik kullanım durumları

Şimdi Divi 5 ile basitleştirilmiş birkaç FlexBox kullanım durumuna bakalım.

1. Her şeyi esnek ile dikey olarak hizalayın

Uzun bir süre, dikey hizalama, web tasarımının en can sıkıcı düzen sorunlarından biriydi. Dolgu hileleri, mutlak konumlandırma, manuel kenar boşlukları ve sadece masaüstlerinde iyi görünen ancak daha küçük ekranlarda kırılmış bir şeyle sonuçlanmayı denersiniz.

Divi 5 ile bu baş ağrısı gitti. Şimdi, içeriği bir bölümün içinde dikey olarak ortalamak istiyorsanız, hizalamayı ortalamanıza ayarlayın.

İşte bu. Düzen, kesme noktaları arasında otomatik olarak ayarlanır ve içeriğiniz her zaman tatlı noktada kalır. CSS jimnastiği alan şey şimdi inşaatçının içinde sadece birkaç tıklama.

2. Kart yüksekliklerini otomatik olarak eşitleyin

Muhtemelen daha önce bu sorunla karşılaştınız. Bir bulanıklık bölümü gibi bir dizi kart oluşturursunuz ve bir öğenin diğerlerinden daha fazla metne sahip olana kadar her şey iyi görünür. Aniden, düzeniniz düzensiz hissediyor. Bazı sütunlar daha uzun, diğerleri kısa kalır ve tasarım dengeyi kaybeder.

Bu manuel temizliğe artık gerek yok. Bir satır veya bölümü Flex olarak değiştirdiğinizde, Divi her sütunu esnek bir öğe olarak ele alan varsayılan ayarları uygular. Bu, içindeki içerik ne olursa olsun, aynı satırda birbirlerinin yüksekliğine uyacak şekilde otomatik olarak gerilmelerini sağlar.

Ayrıca duyarlı kalır. Daha küçük ekranlarda, sütunlar ekstra ayarlamalara ihtiyaç duymadan yeni sıralara sarılır ve eşit yükseklik davranışı uygulanmaya devam eder.

3. Düğmeleri otomatik olarak kesme noktalarına sarın

Farklı ekran boyutlarında bir satır düğmeyi düzgün ve okunabilir tutmak bir ağrı olabilir. Genellikle yeni satırlar eklersiniz veya her kesme noktası için düzeni manuel olarak ayarlarsınız. Ama Divi 5 ile bu artık gerekli değil.

Flex düzenini açın ve dizüstü bilgisayar görünümünde düzen sargısını etkinleştirin. İşte bu. Düğmeler, düzeni kırmadan otomatik olarak daha küçük ekranlarda birden fazla satıra sarılır.

Düğmeler aralıklarını ve hizalamalarını daha büyük ekranlarda tutar ve tabletlerde ve telefonlarda doğal olarak istif yapar. Hizalamalarını Justify-Content kullanarak ince ayar yapabilir ve aralarındaki boşlukları boşluk kullanarak kontrol edebilirsiniz, böylece her şey her boyutta temiz ve kasıtlı görünür.

Divi + flexbox sadece mantıklı

Flexbox'ın nasıl çalıştığını, Divi 5'in onu nasıl görsel hale getirdiğini ve ortak düzen baş ağrılarının saatler yerine saniye sürdüğünü gördünüz. Divi 5 sadece Flexbox'ı desteklemekle kalmaz, aynı zamanda inşa edilmiştir. Her bölüm, satır ve sütun, özel CSS olmadan beklediğiniz gibi davranmaya hazırdır.

Divi 5 ile tasarım yapıyorsanız FlexBox sadece bir seçenek değildir. Bu daha akıllı varsayılandır. Temizleyici düzenler, daha az geçici çözüm ve duyarlı kontrol tam üreticiye pişirilir. Bu değişim ve bu sizi web tasarımının geleceğine hazırlayan bir şey.