Divi 5'teki her bir FlexBox ayarını anlamak

Flexbox ve Divi 5, Divi kullanıcılarının çarpıcı, duyarlı düzenler oluşturmasını sağlayan güçlü bir ikilidir. Bu yazıda, esnek, duyarlı düzenler oluşturmak için her FlexBox ayarını anlamak ve kullanmak için nihai kılavuzu sunacağız.

Flexbox, Divi 5'in yenilenmiş görsel oluşturucusunun kalbinde yer alıyor ve kullanıcıların eşsiz kontrolle çarpıcı tasarımlar oluşturmalarına izin veriyor. Divi 5'in Flexbox Düzen Sistemi, karmaşık düzenleri içeriği hizalamaktan dinamik ızgaralar oluşturmaya kadar bir esinti haline getirir.

Hadi dalalım.

Flexbox nedir?

Flexbox, boyutları dinamik olsa bile, bir kap içindeki öğeleri düzenlemeyi, hizalamayı ve dağıtmayı kolaylaştırmak için tasarlanmış bir CSS düzen modelidir. Şamandıra veya konumlandırmaya dayanan geleneksel CSS düzenlerinin aksine, Flexbox esnek ve duyarlı tasarımlar oluşturmak için sezgisel bir yol sunarak modern web geliştirmenin temel taşı haline getiriyor.

YouTube kanalımıza abone olun

Flexbox'ın temel kavramları

Flexbox birkaç temel kavram etrafında çalışır:

• Flex Container: Ekran: Flex veya Sline-Flex uygulanan, esnek içeriği oluşturan üst öğe. Bu konteyner, çocuklarının düzen içinde nasıl davrandığını belirler.
• Esnek öğeler: Esnek kabın doğrudan çocukları, kabın esnek özelliklerine göre düzenlenmiş ve hizalanmıştır.
• Ana eksen ve çapraz eksen: Flexbox bir ana eksen (ya bir sıra olarak yatay veya sütun olarak dikey) ve dikey bir çapraz eksen boyunca çalışır. Ana eksenin yönü, küresel tasarımlar için esneklik sağlayan soldan soldan sola farklı modlara uyum sağlayabilir.

Divi 5'te Flexbox: Yeni Bir Çağ

Divi 5'in FlexBox Düzen Sistemi, Divi kullanıcılarının sezgisel kontrollere sahip duyarlı düzenler oluşturmasına izin veren görsel oluşturucuya yerleştirilmiştir. Bu ayarlar öncelikle bölümlere, satırlara, sütunlara ve modül gruplarına uygulanır, bu da CSS yazmadan düzen davranışını görsel olarak manipüle etmenize olanak tanır. Flexbox, elemanları hizalamayı, yeniden sıralamayı ve kolayca dönüştürmeyi kolaylaştırır.

Divi 5'te FlexBox'a erişmek

Divi 5'te Flexbox'a erişmek basit ve sezgiseldir. Visual Builder'ı açın, yeni bir satır ekleyin ve tasarım sekmesine gidin. Flexbox ayarlarını düzen açılışının altında bulacaksınız.

Bu ayarlar esnek konteyner seviyesinde (bölümler, satırlar vb.) Uygulanır ve esnek öğelerinin davranışlarını kontrol eder. Divi'nin arabirimi, kullanıcı dostu seçeneklerle ayarları görüntüler ve Flexbox'ı tüm beceri seviyelerindeki kullanıcılar için kolaylaştırır.

Her ayarda yürüyelim, böylece nasıl çalıştıklarını ve düzenler oluşturmak için bunları nasıl kullanacağınızı daha iyi anlayabilirsiniz.

Divi 5'te Flexbox ayarlarının ayrıntılı dökümü

Aşağıda Divi 5'teki her FlexBox ile ilgili ayar için bir rehber bulunmaktadır. Her ayar, bunları etkili bir şekilde uygulamanıza yardımcı olacak amacını, mevcut seçenekleri ve pratik kullanım durumlarını içerir.

Düzen stili

Flex, Düzen Stili açılır menüsünde varsayılan seçenektir. Esneklik için bir kap ayarladığınızda, esnek bir kap haline gelir. Doğrudan alt öğeleri (Flex öğeleri) daha sonra CSS Flexbox özellikleri kullanılarak esnek bir şekilde hizalanabilir.

Öte yandan, blok geçmişte geleneksel divi ile işlenmiş düzenlerdir. Bir blok kap içindeki elemanlar blok seviyesi elemanlar olarak işlenir. Bu, genellikle dikey olarak istif yaptıkları ve üst kabın tam genişliğini altıkları anlamına gelir.

Yatay ve dikey boşluk

Divi 5'in Flexbox ayarlarında, yatay ve dikey boşluk kontrolleri CSS GAP özelliği olarak işlev görür. Bir kap içindeki çocuk elemanları arasında tutarlı bir aralık eklemek için etkili bir yol sağlarlar.

Yatay boşluk, esnek öğeler arasındaki boşluğu yatay olarak düzenlendiklerinde tanımlar. Aşağıdaki örnekte, yatay boşluk her sütun arasındaki boş boşluğu oluşturur, ancak esnek kabın dış kenarlarında değil. Varsayılan olarak, % seçilir, ancak Divi 5'in CSS özelliklerinden herhangi birini burada kullanabilirsiniz.

Dikey boşluk, ürün sıraları arasındaki boşluğu tanımlar. Düzen ambalajını etkinleştirdiğinizde bu inanılmaz derecede önemli hale gelir (daha sonra). Düzen yönü sütun veya sütun tersine ayarlandığında da geçerlidir.

Düzen yönü

Divi 5'teki Düzen yön seçeneği (CSS'deki esnek yönlendirme özelliği) en temel kontrollerden biridir. Konteyner içindeki çocuk elemanlarının düzenleneceği birincil ekseni belirler.

Bunu içeriğinizin akışını ayarlamak olarak düşünün. Dört ana seçenek vardır: satır, satır ters, sütun ve sütun tersi. Satır en yaygın ayardır. Flex öğeleri soldan sağa yatay olarak kendilerini düzenleyecektir. Geleneksel yatay sütun düzenleri, navigasyon menüleri, yan yana öğeler veya sayfa boyunca öğelerin akmasını istediğiniz zaman oluşturmak için idealdir.

Satır tersi ile, öğeler hala yatay olarak, ancak ters yönde düzenlenir.

Sütunu seçtiğinizde, öğeler kendilerini yukarıdan aşağıya dikey olarak düzenler. Bu, modülleri tek bir sütun içindeki istifleme, dikey içerik listeleri oluşturmak veya öğelerin aşağı akması gereken düzenler oluşturma için iyi bir seçenektir.

Sütun tersi , bir kap içindeki öğeleri dikey olarak, ancak ters olarak istifleyerek sütunla aynı şekilde çalışır.

İçeriği haklı çıkar

Divi 5'in Justify Content seçeneği (CSS'deki Justify-Content özelliği), esnek öğelerin esnek kabın ana ekseni boyunca hizalanmasını kontrol eder.

Seçenekler arasında, öğeleri ana eksenin başlangıcına hizalayan Start (CSS'de Flex-sart) bulunur. Center , öğeleri ana erişimin ortasına hizalar.Düzen yönü> satırkullandığınızda, öğeler yatay olarak ortalanır.Düzen yönü> sütunkullanıyorsanız, öğeler dikey olarak ortalanır.End, öğeleri sonuna kadar hizalar (satırınıza veya sütun seçiminize bağlı olarak sağ veya alt).

Öğeleri ana eksen boyunca eşit olarak dağıtmak içinboşlukkullanın. İlk öğe Start ile uyumludur, sonuncusu kabın ucuyla hizalanır. Çevresindeki boşluk, öğeleri ana eksen boyunca eşit olarak dağıtır ve her bir öğenin etrafında eşit boşluktur. Son olarak, boşluk, herhangi bir bitişik öğe ile ilk ve son öğeden önceki boşluğun aynı olduğu öğeleri eşit olarak dağıtır.

Öğeleri hizalayın

Divi 5'in FlexBox ayarlarındakiöğeseçenekleri (hizalanan öğeler CSS özelliği) esnek öğelerin esnek kabın çapraz ekseninde nasıl hizalandığını kontrol eder. Bu seçenek, öğeleri ana eksen boyunca hizalayan haklı içerikten farklıdır.

Düzen yönünüsatır veyasatır tersineayarladığınızda, çapraz eksen dikey hale gelir. Bu,öğelerinüst üste dikey hizalamayı kontrol etmesini sağlar.Düzen yönünüsütuna veyasütun tersineayarlarsanız, çapraz eksen yataydır. Bu nedenle, hizalama öğeleri sütun içindeki öğelerin yatay hizalamasını kontrol edecektir.

Başlangıç, merkez, uç ve streç ile hizalayan, konteynerin çapraz ekseni boyunca mevcut alanı doldurmak için öğeleri uzatan dört ana seçenek vardır. Belirli bir yüksekliğe veya genişliğe sahip bir öğe, streçleri geçersiz kılar.

Düzen sarma

Divi 5'in FlexBox ayarlarında, düzen sarma (Flex-Wrap CSS özelliği), bir esnek kabın içindeki esnek öğelerin, boşluk sıkıldığında bir sonraki çizgiye sarılmak için boşluk bittiğinde ne olacağını belirler. Divi 5'te, sarma, sarma ve sarma tersine dahil olmak üzere üç seçenek vardır.

Hiçbir sargı , esnek kabın mevcut alandan bağımsız olarak tüm Flex öğelerini tek bir satır veya sütuna takmaya çalışmasını söyleyen varsayılan ayar değildir. Öğeler sığamayacak kadar genişse, kabı taşır (sınırların ötesine uzanır) veya sığacak şekilde küçülürler. Wrap, elemanların satırdaki tahsis edilen alanı aşarsa yeni bir çizgiye veya sütuna sarılmasına izin verir. Wrap Ters, sarmak için benzer şekilde çalışır, ancak bir sonraki çizgiye sarıldığında bunu ters yönde yaparlar.

Modül seviyesinde esnek kontroller

Bölüm, satır ve sütun seviyelerinde FlexBox kontrollerine sahip olmanın yanı sıra, Divi 5 ayrıca bireysel divi modülleri üzerinde kesin kontrol sağlar. Örneğin, bir grup modülü kullanırken, boşluğu (boşluk), düzen yönünü ve Divi 5'in diğer Flexbox ayarlarını ayarlayabilirsiniz.

Flexbox'ın avantajları

Divi 5'teki Flexbox sadece teknik bir yükseltme değildir. Modern, duyarlı web siteleri daha kolay ve verimli bir şekilde oluşturmanın daha iyi bir yolunu sunar. Flexbox'ı görsel oluşturucuya entegre ederek Divi 5, tüm beceri seviyelerinden kullanıcıların kod yazmadan CSS'nin gücünü kullanmasına izin verir. Flexbox'ın Divi 4'ten bu kadar etkili bir yükseltme olmasının bazı nedenleri:

Sezgisel Kodsuz Düzen Kontrolü

Divi 5, FlexBox ayarlarını doğrudan görsel oluşturucuya entegre ederek hizalamayı, aralığı ve siparişi basit seçeneklerle ayarlamanıza izin verir. İster eşit sütun yükseklikleri oluşturuyor olun, ister dikey olarak içeriği merkezleme olsun, FlexBox karmaşık düzenleri kolaylaştırır.

Daha iyi duyarlı tasarım

Divi 5'in FlexBox Düzen Sistemi, masaüstleri, tabletler ve akıllı telefonlar için özelleştirilebilir düzen kontrolleri sayesinde duyarlı tasarımı bir esinti haline getirir. Divi'nin Değişiklik Sütun Yapısı seçeneği, tabletler ve akıllı telefonlardaki sütun sayısını değiştirmenizi sağlarken, düzenin sütun yapısını masaüstlerinde bozulmadan bırakır.

Flexbox + iç içe satırlar

Divi 5'teki iç içe sıraları ve Flexbox'ı birleştirmek, karmaşık, çok seviyeli düzenler kolayca oluşturmanızı sağlar. Örneğin, kendi satırını içeren sütunlarla, ızgaralar veya katmanlı içerik bölümleri gibi sofistike tasarımlar sağlayan bir satır oluşturabilirsiniz.

Flexbox + Modül Grupları

Divi 5'teki modül grupları esnek kaplar olarak hareket ederek grup modüllerini uyumlu bir ünite olarak stil ve konumlandırmanıza olanak tanır. Bu, tutarlı aralık ve hizalamayı korurken içerik değişikliklerine otomatik olarak ayarlanan özellik kutuları veya referans kartları gibi dinamik bölümler oluşturmayı kolaylaştırır.

Geliştirilmiş Performans ve Sadelik

Divi 4'ün uzmanlık ve tam genişlik bölümlerini birleşik bir Flexbox tabanlı sistemle değiştirerek, Divi 5 tasarım sürecini kolaylaştırır, karmaşıklığı azaltır ve performansı iyileştirir. Bu, özellikle büyük veya içerik ağır web siteleri için daha hızlı yük süreleri ve daha yumuşak bir düzenleme deneyimi anlamına gelir.

Hızlı başlangıçlar için önceden oluşturulmuş FlexBox şablonları

Divi 5, eşit sütunlar, ofset sütunları, çok sıralı ızgaralar ve çok sütunlu ızgaralar gibi önceden tanımlanmış, esnek düzenler sağlamak için Flexbox'tan yararlanan yeni satır şablonları sunar. Bu şablonlar yaratıcılığa ilham verir ve Flexbox ayarları aracılığıyla tamamen özelleştirilebilir yapılarla tasarımları atlamanıza izin verir.

Geleceğe dayanıklı tasarım iş akışı

Divi 5, kamu alfa aşamasında gelişmeye devam ederken, FlexBox Düzen Sistemi Divi kullanıcılarını modern web tasarımının ön saflarında konumlandırıyor. Flexbox'a şimdi ustalaşarak, kendinizi endüstri standartlarına uygun becerilerle donatarak web sitelerinizin gelecekteki güncellemelere uyarlanabilir kalmasını sağlıyorsunuz.

Divi 5'te Flexbox ile Yaratıcı Potansiyel Kilidini Açın

Divi 5'teki Flexbox, kullanıcıların duyarlı, dinamik düzenler oluşturma şeklini değiştirir. Divi 5, kullanıcıların güçlü CSS Flexbox özelliklerini görsel oluşturucuya sorunsuz bir şekilde entegre ederek kodu yazmadan çarpıcı, modern web siteleri oluşturmalarını sağlar. Sezgisel hizalama ve boşluk kontrollerinden iç içe satırlar ve modül grupları gibi gelişmiş özelliklere kadar, FlexBox düzen sistemi karmaşık tasarımları basitleştirirken, tüm cihazlarda harika görünen mükemmel duyarlı düzenler sağlar.