Flexbox CSS özellikleri için yeni başlayanlar rehberi

İyi düzen, hizalama ve aralık için net bir modelle başlar. Flexbox, yön, hizalama, sarma ve boşluk üzerinde öngörülebilir kontrol ile tek bir eksen boyunca içerik düzenleyerek bu modeli sağlar.

Bu yazı, bu CSS özelliklerinin temellerini ve bunların birlikte nasıl çalıştıklarını kapsar. Temellerden sonra, FlexBox Düzeni Sistemi kullanılarak Divi 5'te aynı yaklaşımın görsel olarak nasıl uygulandığını gösteriyoruz. Hadi alalım!

CSS Flexbox nedir?

Mobil trafik, masaüstünü sollama web tasarımını değiştirdi. Geliştiricilerin telefonlarda, tabletlerde ve masaüstlerinde çalışan düzenlere ihtiyacı vardı. Eski yöntemler genellikle başarısız oldu.

Flexbox bunu düzeltti. CSS Flexbox öğeleri adapte eder. Ekran ekleyin: Bir kapta esneklik yapın ve doğrudan çocukları esnek hale gelir. Alana göre büyüyebilir, büzülebilir veya sabit kalabilirler.

Flexbox, öğeleri düz bir satırda, soldan sağa veya sütunları yukarıdan aşağıya doğru yerleştirir. Yönü seçin.

Konteyner düzeni kontrol eder. Eşitlerin eşit, ortalanmış veya istiflenmiş gibi nasıl hizalandığını ve yerden nasıl çıktığını belirlediniz. GAP özelliği, ekstra marjlar veya dolgu olmadan ürünler arasında tutarlı bir alan ekler. Eski teknikler zor marj matematiği gerektirdi ve sık sık kırıldı.

Geleneksel yöntem rastgele boşluk seçenekleri yapar: burada 10 piksel, 20 piksel, 40px başka bir yerde. Bu dağınık değerler tutarsızlıklara neden olur ve hangi aralığın geçerli olduğunu bilmeyi zorlaştırır. Boşluk özellikleri, tüm öğeler için tutarlı bir kural kullanarak tahminleri kaldırır.

Flexbox ve özellikleri için hızlı bir rehber

Flexbox iki kampa ayrılır: kaplar için özellikler ve ürünler için özellikler. Konteyner özellikleri tüm grubu etkilerken, öğe özellikleri tek tek öğeleri değiştirmenize izin verir. Çoğu mizanpaj, aşağıdakiler gibi bu özelliklerin sadece bir avuçına ihtiyaç duyar:

Ekran: Flex

Ekran: Flex ekleyerek herhangi bir öğeyi esnek bir kapa dönüştürün. Doğrudan çocukları esnek ürünler haline gelir. Öğeler, standart blok öğeleri gibi istiflemek yerine varsayılan olarak arka arkaya sıraya girer. Aralık baş ağrılarınız kaybolur çünkü esnek öğeler normal öğelerden farklı kurallara uyur. Konteyner artık çocuklarının (veya öğelerinin) nasıl davrandığını kontrol ediyor ve olağan CSS sürprizleri yerine öngörülebilir sonuçlar elde edersiniz.

esnek yönlendirme

Hangi yön öğelerinin aktığını seçin. Soldan sağa düzenleme için bir satır kullanın.

ve ürünleri dikey olarak istiflemek için bir sütun.

Birine tersine ekleyin ve öğeler siparişlerini tamamen çevirin.

Bu seçim, diğer özelliklerin nasıl çalıştığını etkileyen merkezi ekseninizi ayarlar.

Satırdan sütuna geçiş, haklı-içerik ve hizalanma öğelerinin nasıl davrandığını değiştirir, böylece yönlendirme planlamanızda ilk gelir.

haklı çıkarmak

Bu özellik, merkezi ekseniniz boyunca kalan alanı dağıtır. Ürünler ihtiyaç duydukları şeyi alır ve sonra bu mülk geri kalanı yönetir. Başlangıçta her şeyi bir araya getirmek için Flex-Sart'ı, ortada öğeleri kümelenmek için merkeze ve her şeyi sona erdirmek için esnek uç kullanın. Aynı zamanda, eşyaları eşit boşluklarla ayırmak için aradaki boşluk kullanılır. Alandaki değer, her bir öğeyi her iki tarafta eşit alan verirken, boşluk bile her yerde özdeş boşluklar yaratır.

hizalama

Çapraz eksen üzerinde hizalamayı işler. Yatay düzenler için bu, dikey hizalama anlamına gelir. Dikey düzenler için yatay konumlandırmayı kontrol eder. Flex-sart, orta, esnek uç, streç ve taban çizgisi (boşluk değil) gibi değerleri destekler. Merkeze ayarlayın ve öğeler yüksekliklerine bakılmaksızın ortaya hizalanır. Varsayılan değer streçtir: öğeler kabın çapraz boyutunu doldurmak için gerilir. Konteynerin çapraz boyutu otomatikse, genellikle en yüksek öğeye eşittir, böylece öğeler yükseklikte eşit görünür.

esnek sarma

Eşyalar oda bittiğinde ne olacağına karar verir. Varsayılan NowRap, öğeleri daraltarak her şeyi bir satırda tutar. Sarmak için geçiş ve tercih edilen boyutları korurken yeni çizgilere düşün. Sarma yönünü de tersine çevirebilirsiniz. Sarma, tek satırınızı birden çok satıra dönüştürerek ızgaralara benzeyen düzenler oluşturur.

açıklık

Marjlarla uğraşmadan eşyalar arasında boşluk ekler. Boşluğu ayarlayın: 20 piksel ve her öğe tutarlı bir aralık alır. Gerekirse farklı yatay ve dikey boşluklar ayarlayabilirsiniz. Alan sadece kenarların etrafında değil, öğeler arasında görünür. Bu, daha sonra düzenleri değiştirdiğinizde kırılan marjları hesaplayan marjları yener.

Bu özellikler, onları astığınızda iyi çalışır. Zor kısım, her birinin ne yaptığını hatırlamak ve tüm CSS yazmaktır. Biraz kod yazıyorsunuz, tarayıcınızı yenileyin, tam olarak doğru olmadığını görün, sonra geri dönün ve ayarlayın. Divi gibi görsel yapımcılar, özellik adlarını yazmak yerine düğmeleri tıklamanıza izin vererek bunu çevirir.

Divi 5 FlexBox'ı görselleştirir

Belirlediğimiz gibi, Flexbox'ı öğrenmek bir şeydir; Hatırlatıcı-İçerme: Uzay Arası Neyi Hatırlamak Başka bir şeydir. Tasarımdan daha fazla zaman harcıyorsunuz. CSS yazmak yerine, Divi Builder'da her seçeneğin tam olarak ne yaptığını gösteren düğmeler ve kaydırıcılar kullanırsınız. Divi 5 bunu Flexbox'a getirir ve soyut kavramları basit, tıklanabilir kontrollere dönüştürür.

Daha derine dalmadan önce, Divi'nin ne olduğuna kısaca bakalım.

Divi nedir?

Divi, WordPress'i güçlük olmadan iyi görünümlü siteler isteyen insanlar için çalıştıran bir web sitesi oluşturucudur.

200'den fazla modülü sayfanızın etrafına sürükleyebilir ve oturduğu metni değiştirebilirsiniz. Renkleri seçin ve gerçek sitede çalışırken anında görünmelerini izleyin, daha sonra size yalan söyleyebilecek bazı önizlemeler değil.

Tema, restoranlar, fotoğrafçılar, danışmanlar ve diğer işletmeler için 2000'den fazla düzen içerir, böylece istediğiniz birini bulabilir ve ihtiyaçlarınız için mükemmel çalışana kadar değiştirebilirsiniz.

Tema oluşturucu, sitenizin her kısmını kontrol eder. Herkes gibi görünmek yerine öne çıkan başlıklar tasarlayabilir, insanların okumak istediği blog sayfaları oluşturabilir ve hatta 404 sayfanızı ziyaretçilerin ayrılmak yerine etrafta dolaşacak kadar ilginç hale getirebilirsiniz.

Divi AI, hızlı bir şekilde oluşturmanıza yardımcı olur

Bir zamanlar, temalar ve şablonlar yapmak, kopya, görüntüler ve tasarım fikirleri için farklı uygulamaları dengelemek anlamına geliyordu. Divi AI, ihtiyacınız olan her şeyi birleşik bir arayüze toplar: tam web sitelerinizi oluşturduğunuz yer.

Metne ihtiyacınız olduğunu söyle ve yazıyor.

Özel görüntüler isteyin ve onları yaratır. Fotoğraf düzenlemelerini bile tanımlayabilir ve değişiklikleri yapmasını izleyebilirsiniz.

Ayrıca, kodu işler ve sorduğunuzda yeni bölümler oluşturur.

Divi Hızlı Siteler, nereden başlayacağınızı bilmeden boş bir sayfaya bakmanızı sağlar. İyi görünen orijinal görüntüler ve sanat eserleri ile ekibimizin tasarladığı başlangıç ​​sitelerinden seçim yapabilirsiniz.

Ayrıca işletmenizi Divi Hızlı Siteler olarak tanımlayabilir ve AI kullanarak sıfırdan bir şeyler inşa etmesine izin verebilirsiniz. Bu AI tarafından oluşturulmuş siteler, açıklamanızla eşleşen gerçek manşetler, kopya ve resimlerle birlikte gelir.

AI ile her şeyi oluşturun, Unplash'tan fotoğraf çekin veya resimleriniz için yer tutuculara bırakın. Önce yazı tiplerinizi ve renklerinizi ayarlayın, ardından AI'nın her şeyi daha sonra düzenlenebilir tutarken marka seçimleriniz etrafında çalışmasına izin verin.

Divi 5: Geleceğe Dönemli Web Sitesi Oluşturucu

Divi 5 tüm çerçeveyi baştan yukarıdan yeniden inşa eder.

Görsel oluşturucu daha pürüzsüz çalışır, sayfalar daha hızlı hale gelir ve kod tabanı modern web standartlarını daha etkili bir şekilde destekleyebilir. Daha temiz işaretleme, daha iyi performans ve şimdiki ve gelecek için hazır bir temel elde edersiniz.

Arayüz de akıcı hale getirilir. Ayarlar daha mantıklı bir şekilde düzenlenmiş görünür ve günlük görevler daha az tıklama gerektirir. Basit sayfalar veya karmaşık düzenler inşa ederseniz de, genel deneyim daha duyarlı hissediyor.

Altında çok daha güçlü bir temelle bildiğiniz aynı görsel bina yaklaşımını elde edersiniz.

Divi 5'te Yenilikler

Yeni mimari, daha önce mümkün olmayan özellikler için kapı açıyor. Bu 18'den fazla ekleme, web sitelerini oluşturma ve yönetme şeklinizi değiştirir.

İşte ne elde ettiğinize bir örnek:

• FlexBox Düzen Sistemi: Hizalama, Aralık ve Konumlandırma için Görsel Kontroller. Elemanlar otomatik olarak yeni çizgilere büyüyebilir, büzülebilir veya sarılabilir. Kodsuz karmaşık düzenler için iç içe satırlar ve modül grupları ile çalışır.
• İç içe satırlar: Sıraları sonsuz yuvalama ile diğer satırlara koyun. Kod geçici çözümleri olmadan karmaşık düzen yapıları oluşturun.
• 17 WooCommerce Modülleri: Ürün Galerisi Ekle, İncelemeler, Derecelendirmeler, Stok Bildirimleri, Ekmek Kırıntıları, Ürün Meta, Gözlükler ve Daha Fazlası dahil. Sepet ve ödeme modülleri yakında geliyor.
• Etkileşim Sistemi: Pop-up'lar, geçişler, kaydırma animasyonları, fare hareketi efektleri ve görünüm portu tetikleyicileri oluşturun. Kaydırdıktan sonra solmuş promosyon afişleri gibi karmaşık davranışlar için birden fazla tetikleyiciyi karıştırın.
• Duyarlı Editör: Daha hızlı, daha hassas ve daha az dağınık düzenleme için görünüm modlarını değiştirmeden herhangi bir ayar için aynı anda herhangi bir ayar için Duyarlı Varlık ve Yapışkan durumları görüntülemenize, düzenlemenize ve sıfırlamanıza olanak tanır.>
• Döngü Oluşturucu: Veritabanınızdan çeken dinamik içerik oluşturun. Özel yazı düzenleri, ürün ızgaraları ve tekrarlayan bölümler oluşturun. WooCommerce ürünleri ile çalışır.
• Seçenek Grup Ön Ayarları: Tipografi, sınırlar, gölgeler ve arka planlar için yeniden kullanılabilir stiller oluşturun. Bunları sadece tek modüllere değil, uyumlu herhangi bir öğeye uygulayın.
• Tasarım Değişkenleri: Renkler, yazı tipleri, boşluk, sayılar, görüntüler ve metin için global değerleri ayarlayın. Birincil renginizi bir kez değiştirin, otomatik olarak her yerde güncellenir.
• Gelişmiş CSS Birimleri: Görsel kontroller aracılığıyla CLAMP (), Calc (), Min () ve Max () işlevlerini kullanın. Duyarlı tipografi ve boşluk hesaplamaları için kod gerekmez.
• Göreceli renkler ve HSL: Matematiksel olarak güzel renk sistemleri oluşturun. Temel renk değiştiğinde uyumu otomatik olarak koruyan renk varyasyonları oluşturun.

Ve daha fazlası geliyor! Geliştirme ekibimiz, genel beta sürümüne hazırlanırken ~ iki haftada bir özellikler eklemeye devam ediyor.

Divi 5'in Flexbox kurulumuna hızlı bir bakış

Divi 5'in görsel yaklaşımı, flexbox uygulamasından tahminleri ortadan kaldırır. Mülk adlarını ezberlemek ve CSS yazmak yerine, her kontrolün tam olarak ne yaptığını gösteren düğmeler ve kaydırıcılar alırsınız. Ne kadar kolay olduğuna bir göz atın.

1. İlk esnek satırınızı ayarlayın

Genişletilmiş şablon seçiminden satır yapınızı seçerek başlayın. Divi 5, eşit sütunlar, çoklu sıra ızgaralar ve çoklu sütunlu kurulumlar dahil olmak üzere daha birçok düzen seçeneği sunar.

Divi 5'teki yeni bölümler Flexbox ile otomatik olarak başlar. Yeni bir satır eklediğinizde, Flex özellikleri açıkken hazır gelir. Ancak, eski Divi sürümlerinden mevcut bölümlerle çalışıyorsanız, satırınızdaki Ayarlar simgesini tıklayarak, tasarım sekmesine> düzene giderek ve “blok” olarak değiştirerek bunları manuel olarak varsayılan blok düzeninden esnek olarak değiştirmeniz gerekir.

2. yön, akış, hizalamayı anlamak

Düzen yön alanınız öğelerin nerede bittiğini belirler. Satır, öğelerin yatay olarak sıralanmasını sağlayan varsayılan ayardır.

Sütuna geçin ve öğeler düzenli web düzenleri gibi dikey olarak öğeleri istifleyin.

Her iki seçenek de siparişi tamamen çeviren ters sürümlerle birlikte gelir.

Bu arada, Justify içeriği ana ekseniniz boyunca artık alanla neler olduğuna karar verir. Sıralar için, başlangıç, orta merkezler yatay olarak kalır ve son sağa doğru hizalanır.

Sütunlar için, başlama üst anlamına gelir, her şeyi orta merkezler ve bitiş öğeleri altına iter.

Standart başlangıç, merkez ve bitiş hizalamasının ötesinde, navigasyon menüleri veya kart düzenleri için mükemmel olan, eşit boşluklarla ayrı ayrı parçalar arasında yer alırsınız.

Etrafındaki boşluk, her bir öğeye her iki tarafta eşit solunum odası verir, bu da tutarlı kenar boşlukları istediğinizde yararlıdır. Ve uzay, dengeli görsel aralık için ideal olan her yerde aynı boşluklar yaratır.

Hizala öğeler akış yönünüze dik çalışır. Satır düzenini seçerseniz, bu, öğelerin dikey konumunu kontrol eder.

Sütun düzeni seçtiyseniz, yatay hizalamayı işler.

Merkez, her şeyi ortada tutar, başlangıç ​​öğeleri başlangıç ​​kenarındaki konumlandırır, uç onları uzak kenara iter ve streç eşyaların mevcut alanı doldurmasını sağlar.

Bu kontroller, özel CSS hesaplamaları olmadan ortak düzen baş ağrılarını çözer.

3. Boşluk kontrolleri ile işleri boşaltın

Boşluk Kontrolleri Konteynerinizdeki esnek öğeler arasında boşluk ekler: sütunlar, modüller ve herhangi bir içerik türü çalışması. Boşluklar dağınık dolgu veya marj matematik olmadan nefes odası yaratır. Boşluk sadece dış kenarlarda değil, öğeler arasında görünür.

Yatay boşluğunuzu 20 piksel olarak ayarlayın ve her sütun tam bu aralıklara sahip olacaktır.

Dikey boşluğu 20 piksel olarak değiştirin ve tüm boşluklar anında güncellenir.

Divi 5, görünüm portu uzunlukları ve yüzdeler gibi gelişmiş CSS birimlerini destekler. Ekran boyutları arasında ölçeklenen duyarlı boşluklar için CLAMP () kullanabilirsiniz. Calc (2REM + 10px) gibi birimleri birleştiren Calc () işlevi de desteklenir.

Buradaki boşluk kontrolleri tasarım değişkenlerini de desteklemektedir. Değer olarak kelepçe (16px, 2vw, 32px) ile “yatay sütun boşluğu” adı verilen bir sayı değişkeni ekleyin. Bu değişkeni sitenizdeki boşluk kontrollerine uygulayın.

Daha sonra daha sıkı boşluk istediğinizde, değişkeni düzenleyin; Her boşluk anında güncellenecek.

4. Öğelerin nasıl sarıldığını kontrol etmek

Düzen sarma, öğelerin yatay boşluğun tükendiğinde ne olacağını kontrol eder. Varsayılan hiçbir sargı ayarı, kabı sığdırmak için öğeleri daraltarak her şeyi bir satırda tutar. Sarmak ve doğal boyutlarını korurken yeni çizgilere düşmüş ürünler açın.

Wrap Ters, normal sargı ile aynı şeyi yapar, ancak yönü çevirir. Yeni çizgiler aşağıda değil, öncekilerin üstünde görünür.

Bu, öğeler taştığında görsel hiyerarşiyi kontrol eder. Sarma davranışı farklı ekran boyutlarında tutarlı kalır, bu nedenle düzeniniz tahmin edilebilecek şekilde masaüstünden mobil cihazlara kırılmadan uyum sağlar.

Divi 5 ayrıca size sarma hizalama kontrolleri sağlar. Flex sarma ve çoklu satır formlarını etkinleştirdiğinizde bu özellik otomatik olarak görünür. Yön satır olarak ayarlandığında, sarma hizalaması dikey hizalama için kullanılabilir.

Benzer şekilde, sütun yönü için seçenekler yatay hizalama içindir.

Stretch, mevcut dikey alanı doldurmak için tüm çizgilerin genişlemesini sağlar. Başlangıçta çizgiler demetlerini başlatın, ortada orta kümeler ve bunları karşı kenara doğru iterek sonlandırın.

Serpme hatları arasındaki boşluklar eşit boşluklarla ayrı, etrafındaki boşluk her çizgiyi her iki tarafta eşit solunum odası verir ve boşluk, tüm çizgiler arasında aynı boşluklar yaratır.

Bu, kart düzenleri, resim galerileri veya birden çok satır boyunca doğal olarak akması gereken herhangi bir içerik için harika çalışır. Öğeler, mevcut genişliğe göre yeniden düzenleme yaparken oranlarını ve boşluklarını korur. Küçük ekranlarda birlikte ezilmeden temiz molalar elde edersiniz.

5. Farklı ekran boyutlarında çalışmak

Divi 5'in yedi kesme noktası, düzenlerinizin nasıl uyum sağladığı konusunda ayrıntılı kontrol sağlar.

Her bir kırılma noktası bağımsız olarak çalışır, böylece masaüstü satır düzeniniz dokunulmadan kalırken, mobil cihazlarda yerleşim yönünüzü mobil cihazda sütuna değiştirebilirsiniz. Her şeyi telefonlarda ortalayabilirsiniz, ancak bu alanı daha büyük ekranlarda hizalama arasında tutun.

Masaüstü üç sütun kurulumunuz, orta kesme noktalarını etkilemeden mobil cihazlarda tek sütunlu bir yığın haline gelebilir. Her ekran boyutu, bu görüntüleme deneyimi için en iyi olanı tam olarak alır.

Yeni duyarlı editör bu süreci çok daha pürüzsüz hale getiriyor. Tüm ekran boyutları için değerleri aynı anda görüntülemek ve değiştirmek için herhangi bir ayarın yanındaki Duyarlı Düzenleme simgesini tıklayın.

Bununla birlikte, satırlarınızı ve sütunlarınızı boşaltmak için CLAMP () değerleri kullanıyorsanız, manuel değişiklikler gerektirmeden kesme noktaları arasında otomatik olarak ölçeklenir.

6. Opsiyon Grup Ön Ayarları Oluşturma

FlexBox Düzeninizi istediğiniz şekilde çalıştırdıktan sonra, seçenek grubu ön ayarları seçeneğini tıklayıp uygun şekilde etiketleyerek bu ayarları bir seçenek grubu ön ayar olarak kaydedebilirsiniz.

Boşluk değerleriniz, hizalama seçenekleriniz ve sarma ayarlarınız bir araya getirilir. Kaydet'i tıkladığınızda, bu düzen yapılandırması sitenizde yeniden kullanılabilir hale gelir. Kaydedilen önceden ayarlanmayı kullanmak istediğinizde, yeni satırdaki önceden ayarlanmış simgeye tıklayın ve kaydettiğiniz ön ayarı seçin.

Ön ayar, gelişmiş birimlerinizi sağlam tutar. Duyarlı boşluk transferleriniz, kurduğunuz tüm matematikle aktarılır ve değişiklikler farklı kesme noktalarında bile yapılmıştır.

Bugün Divi 5'in Flexbox'ına başlayın

Flexbox, düzenleri değiştirdiğinizde kırılan marj ve dolgu matematiğini ortadan kaldırır. Medya sorguları ve özel bölümlerle duyarlı tasarımla uğraşmayı bırakıyorsunuz.

Divi 5 bu soyut CSS özelliklerini görsel kontrollere dönüştürür. Yön ayarlamak için düğmeleri tıklatabilir, boşlukları ayarlamak için kaydırıcıları sürükleyebilir ve sarma açıp kapatmayı geçebilirsiniz. Duyarlı editör, bir panelden yedi kesme noktasının tümünü işler, böylece kodda tahmin etmek yerine sonuçları anında görürsünüz.

Başarılı kombinasyonları ön ayar olarak kaydedin ve her yerde yeniden kullanın. CSS sözdizimini hata ayıklamak yerine tasarlamak için zaman harcıyorsunuz.