Flexbox ile Yalnızca CSS'ye Özel Akıllı Düzenler Nasıl Oluşturulur

Esnek kutu veya kısaca Flexbox, yeni, istisnai bir yerleşim sistemi sağlamak için 2009'da tanıtılan CSS'de bir dizi özelliktir. Flexbox modülü, CSS'nin (CSS3) üçüncü sürümünün bir parçası olarak tanımlanır.

box-shadow , border-radius , arka plan gradyanları vb. gibi CSS3'teki birçok yeni özelliği muhtemelen zaten kullanıyorsunuz. Ancak Flexbox, hak ettiği yaygın kabulü henüz görmedi. Bunun nedeni, yıllar içinde uğradığı tüm köklü değişiklikler veya Internet Explorer 10'da yalnızca kısmen desteklenmesi veya önceki paradigmalar ağırlıklı olarak tek, kullanıma hazır temellere dayalıyken Flexbox'ın bütün bir ekosistem olması olabilir. özelliklere gidin.

Süper güçlüdür ve daha önce sadece hayal edilebilecek düzenler elde etmek için çok çeşitli seçenekler sunar.

Bu makale, Flexbox'ın temelleri ve aksi takdirde karmaşık CSS korsanlıkları ve hatta JavaScript gerektiren gerçekten harika mizanpajlar elde etmek için onu nasıl kullanabileceğiniz konusunda size yol gösterecektir.

Neden Flexbox'ı Kullanmalısınız?

Varsayılan olarak, HTML blok düzeyinde öğeler yığınlanır, bu nedenle bunları bir satırda hizalamak istiyorsanız, float gibi CSS özelliklerine güvenmeniz veya display özelliğini table-ish veya satır içi blok ayarlarıyla değiştirmeniz gerekir.

float (sol veya sağ) kullanmayı seçerseniz, en son kayan öğeye kadar itmek için bir noktada sarmalayıcıyı temizlemelisiniz, aksi takdirde sonraki her şeyin üzerinden taşarlar. Ancak, float ile öğeleri yatay olarak düzenlemekle sınırlısınız.

Alternatif olarak veya ek olarak, istediğiniz düzeni elde etmeye çalışmak için display özelliğini değiştirebilirsiniz! Ancak bu, en iyi ihtimalle en iyi ihtimalle hantal hissettirir, ayrıca sıkıcıdır ve genellikle tarayıcılar arasında tutarlı bir şekilde görüntülenmesi gerekmeyen oldukça kırılgan bir düzen ile sonuçlanır. Bu yaklaşım, özellikle günümüzde neredeyse her zaman geçerli olan, farklı boyutlarda birden fazla cihazı hedefliyorsanız etkisizdir.

Flexbox'a girin!

Bir üst öğeye uygulanan basit bir kuralla, tüm alt öğelerinin yerleşim davranışını kolayca kontrol edebilirsiniz.

Flexbox ile şunları yapabilirsiniz:

• Bir Flexbox üst öğesi içindeki öğelerin sırasını tersine çevirin.
• Alt öğeleri sütunlara sarın (sütun sayısı alt öğe ve üst öğenin boyuna göre değişebilir).
• Görünüm alanı boyutu değişirken öğelerin büyüdüğü veya küçüldüğü hızı belirtin.
• Belirtilen genişlik birimi türünden (göreceli veya mutlak) bağımsız olarak öğelerin küçülüp küçültülmeyeceğini kontrol edin.
• Öğelerin sırasını CSS ile değiştirin (bunu medya sorgularıyla birleştirin ve akışınızda sınırsız olanaklar bulacaksınız).
• Etrafındaki boşlukla veya sadece arasındaki boşlukla eşit uzaklıkta olacak öğelerin karmaşık dağılımlarını oluşturun.
• Farklı şekilde akan “dönen” öğeler oluşturun (herkes sola, biri sağa, yukarıya/aşağıya… bu sizin kararınız).
• Ve en önemlisi, kalıcı olarak düzeltme hilesinden kaçının!

Flexbox'ın başlangıçta zor olabileceğini anlıyorum. Birbirine bağımlılıkla beş tane alakasız CSS özelliğini öğrenmenin daha kolay olduğunu düşünüyorum. Bununla birlikte, mevcut CSS becerilerinizle ve belki bu makaleden biraz yardım alarak, kendinizi yeni bir CSS evrenine başlatacaksınız.

Flexbox'ın Temelleri

Görüntülemek

display , CSS'deki en temel özelliklerden biridir ve bir esnek sarmalayıcıyı tanımlamak için kullanıldığı için Flexbox bağlamında oldukça önemlidir.

İki olası esnek sarmalayıcı değeri vardır: flex ve inline-flex .

İkisi arasındaki fark, display: flex wrapper'ın bir blok öğesi gibi hareket etmesi, display: inline-flex wrapper'ın ise bir satır içi blok gibi davranmasıdır. Ayrıca, çocukları içerecek yeterli alan yoksa, inline-flex öğeler büyür. Ancak bu farklılıklar dışında, ikisinin davranışı aynı olacaktır.

Aşağıdaki örnek kodu deneyin, satır içi esnek etkinken görüntü alanı genişliğini azaltın ve… kaydırın.

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Parent - `display` özelliğine bakın.

 .wrapper { display: flex || inline-flex; }

Esnek Yön

Artık ilk örneği gördüğünüze göre, varsayılan davranışın basitçe bir dizi eleman yapmak olduğu sonucuna varabilirsiniz. Ama dahası var:

• satır (varsayılan): Öğeleri soldan sağa sıralar (ancak RTL ayarlanmışsa geriye doğru olur).
• satır-ters: Bir satır yerleşimindeki öğelerin sırasını tersine çevirir
• sütun: Elemanları yukarıdan aşağıya sıralar
• sütun-ters: Bir sütun yerleşimindeki öğelerin sırasını tersine çevirir

İpucu: column ve column-reverse değerleri eksenleri değiştirmek için kullanılabilir, bu nedenle yatay ekseni etkileyecek özellikler bunun yerine dikey ekseni etkiler.

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Parent - `flex-direction` özelliğine bakın.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Esnek Sargı

İlk kod örneğini kontrol ederseniz, alt öğelerin bir esnek sarmalayıcı içinde varsayılan olarak yığılmadığını anlayacaksınız. flex-wrap devreye girdiği yer burasıdır:

• Nowrap (varsayılan): Esnek bir kaptaki öğelerin sarılmasını önler
• sarma: Öğeleri gerektiği gibi birden çok satıra (veya flex-direction bağlı olarak sütunlara) sarar
• sarma ters: Tıpkı wrap gibi, ancak öğeler sarılırken satır (veya sütun) sayısı ters yönde artar

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Parent - `flex-wrap` özelliğine bakın.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Esnek Akış

flex-direction ve flex-wrap özelliklerini tek bir özellikte birleştirebilirsiniz: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

İçeriği Yasla

Bu özellik, alt öğelerin yatay hizalamasını kontrol etmek için kullanılır:

• esnek başlangıç ​​(varsayılan): Öğeler sola hizalanır ( text-align: left )
• esnek uç: Öğeler sağa hizalanır ( text-align: right )
• center: Öğeler ortalanır ( text-align: center )
• space-around (sihrin başladığı yer): Her öğe, her öğenin etrafında aynı miktarda boşlukla oluşturulacaktır. İki ardışık alt öğe arasındaki boşluğun, en dıştaki öğelerle sargının yanları arasındaki boşluğun iki katı olacağına dikkat edin.
• boşluk-arasında: Tıpkı space-around olduğu gibi, öğelerin aynı mesafeyle ayrılması ve sargının her iki kenarının yakınında boşluk olmaması dışında.

Not: flex-direction column veya column-reverse olarak ayarlandığında ekseni değiştirdiğini unutmayın. Bunlardan biri ayarlanırsa, justify-content yatay değil dikey hizalamayı etkiler.

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Parent - `justify-content` özelliğine bakın.

Öğeleri Hizala

Bu özellik, justify-content benzer, ancak etkilerinin bağlamı, sarmalayıcının kendisi yerine satırlardır:

• flex-start: Öğeler, sarmalayıcının üst kısmına dikey olarak hizalanır.
• esnek uç: Öğeler, sargının altına dikey olarak hizalanır.
• center: Öğeler sargı içinde dikey olarak ortalanır (sonunda, bunu başarmak için güvenli bir uygulama).
• streç (varsayılan): Öğeleri, sarmalayıcının tam yüksekliğini (bir satıra uygulandığında) ve tam genişliğini (bir sütuna uygulandığında) işgal etmeye zorlar.
• baseline: Öğeleri gerçek taban çizgilerine dikey olarak hizalar.

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Parent - `align-items` özelliğine bakın.

İçeriği Hizala

Bu özellik, justify-content ve align-items benzer, ancak dikey eksende çalışır ve bağlam, sarmalayıcının tamamıdır (önceki örnekteki gibi satır değil). Etkilerini görmek için birden fazla satıra ihtiyacınız olacak:

• flex-start: Satırlar dikey olarak üste hizalanır (yani, sargının tepesinden istiflenir).
• esnek uç: Satırlar alta dikey olarak hizalanır (yani, sargının altından istiflenir).
• center: Satırlar, sarmalayıcıda dikey olarak ortalanır.
• streç (varsayılan): Genel olarak, bu özellik, sarmalayıcının tüm dikey yüksekliğini kullanmak için öğeleri uzatır. Ancak, öğelerin belirli bir yüksekliğini ayarladıysanız, bu yükseklik dikkate alınacak ve kalan dikey boşluk (o satırda, o öğenin altında) boş olacaktır.
• boşluk-etrafında: Her satır dikey olarak kendi etrafında aynı miktarda boşlukla oluşturulacaktır (yani, kendisinin altında ve üstünde). Bu nedenle, iki sıra arasındaki boşluğun, üst ve alt sıralar ile sargının kenarları arasındaki boşluğun iki katı olacağını unutmayın.
• boşluk-arasında: Tıpkı space-around olduğu gibi, elemanlar aynı mesafeyle ayrılacak ve sargının üst ve alt kenarlarında boşluk olmayacak.

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Parent - `align-content` özelliğine bakın.

Esnek Büyüme

Bu özellik, öğenin kullanması gereken kullanılabilir alanın göreli oranını ayarlar. Değer, 0'ın varsayılan olduğu bir tam sayı olmalıdır.

Diyelim ki aynı esnek sarmalayıcıda iki farklı öğeniz var. Her ikisinin de flex-grow değeri 1 ise, kullanılabilir alanı paylaşmak için eşit olarak büyürler. Ancak, aşağıdaki örnekte gösterildiği gibi, biri flex-grow değeri 1 ve diğeri flex-grow değeri 2 ise, flex-grow değeri 2 olan bu, ilkinden iki kat daha fazla yer kaplayacak şekilde büyüyecektir.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Children - `flex-grow` özelliğine bakın.

Flex Shrink

flex-grow benzer şekilde, bu özellik, elemanın bir tamsayı değeriyle "büzülebilir" olup olmadığını belirler. flex-grow benzer şekilde, flex-shrink bir esnek öğenin küçültme faktörünü belirtir.

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Çocuklar - `flex-shrink` özelliğine bakın.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

Esnek Temel

Bu özellik, kullanılabilir alan dağıtılmadan ve öğeler buna göre ayarlanmadan önce bir öğenin başlangıç ​​boyutunu tanımlamak için kullanılır.

İpucu: flex-basis , her tarayıcıda calc() ve box-sizing: border-box desteklemez, bu nedenle, bunlardan birini kullanmanız gerekiyorsa width kullanmanızı öneririm (ayrıca flex-basis: auto; ayarlamanız gerekeceğini unutmayın) flex-basis: auto; ).

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Çocuklar - `flex-basis` özelliğine bakın.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

Esnek

flex-grow , flex-shrink ve flex-basis özelliklerini tek bir özellikte birleştirebilirsiniz: flex aşağıdaki gibi:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

İpucu: flex kullanmayı planlıyorsanız, her bir değeri tanımladığınızdan emin olun (varsayılan değerleri kullanmak isteseniz bile), çünkü bazı tarayıcılar bunları tanımayabilir (yaygın bir hata, flex-grow değerini tanımlamamış olmakla ilgilidir).

Kendini Hizala

Bu özellik, align-items benzer ancak efekt, her öğeye ayrı ayrı uygulanır. Olası değerler şunlardır:

• flex-start: Öğeyi sarmalayıcının üstüne dikey olarak hizalar.
• esnek uç: Öğeyi sargının altına dikey olarak hizalar.
• center: Öğeyi sarıcı içinde dikey olarak ortalar (en sonunda bunu başarmanın basit bir yolu!).
• streç (varsayılan): Öğeyi, sarmalayıcının tam yüksekliğini (bir satıra uygulandığında) veya sarmalayıcının tam genişliğini (bir sütuna uygulandığında) kaplayacak şekilde uzatır.
• baseline: Öğeleri gerçek taban çizgilerine göre hizalar.

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Çocuklar - `align-self` özelliğine bakın.

Sipariş

Flexbox'ta bulunan en iyi şeylerden biri, DOM'yi değiştirmeye veya JavaScript'i kullanmaya gerek kalmadan öğeleri yeniden sıralayabilme ( order özelliğini kullanarak) yeteneğidir. order özelliğinin çalışma şekli çok basittir. z-index öğelerin oluşturulma order kontrol etmesiyle aynı şekilde, sıra öğelerin sarmalayıcı içinde konumlanma sırasını kontrol eder; yani, daha düşük order değerine sahip öğeler (bu arada, negatif bile olabilir), daha yüksek order değerine sahip olanlardan önce konumlandırılır.

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Çocuklar - `order` özelliğine bakın.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Hepsini Bir Araya Getirmek: Flexbox'ın Örnek Kullanımları

Düzenleri tasarlamaya gelince, Flexbox bir olasılıklar dünyasını ortaya çıkarır. Aşağıda, Flexbox özelliklerinin bazı örnek kullanımlarını bulabilirsiniz.

Dikey Hizalama Bileşeni

Flexbox ile aynı anda birden çok öğe dahil her şeyi dikey olarak hizalayabilirsiniz. Flexbox olmadan, birden çok öğeyi içerecek bir alt öğe oluşturmamızı gerektiren konumlandırma veya tablo benzeri teknikleri kullanmanız gerekiyordu. Ancak Flexbox ile, bu sıkıcı ve kırılgan teknikleri geride bırakabilir ve kapsayıcıdaki içeriğin kaç kez değiştiğine veya değişikliğin türüne bakılmaksızın, sarmalayıcıda birkaç özellik tanımlayabilirsiniz ve hepsi bu kadar!

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

Pen Flexbox @Toptal'a bakın - Verebileceğimiz gerçek kullanımlar - CodePen'de DD (@Diegue) tarafından dikey hizalama.

Yarım/yarım Düzen

"Yarım/yarım" düzen, her biri içeriği dikey olarak ortalanmış iki sütunlu tam yükseklikte bir düzendir. Genellikle "ekranın üst kısmında" uygulanır (yani, kullanıcılar sayfa yüklendikten sonra aşağı kaydırmadan önce).

Daha geleneksel teknikleri kullanarak, yüzen öğelerle (her biri %50 genişlikte) bu düzeni oluşturabilirsiniz, yüzer öğeleri sarmalayıcıda temizleyerek ("clearfix" :before ve :after , overflow: hidden veya net ile tuhaf bir <div> clear: both; sonunda). Yine de bu çok fazla iş ve sonuç Flexbox'ın sağladığı kadar istikrarlı değil.

Aşağıdaki kod parçacığında, düzeni ayarlamanın ne kadar kolay olduğunu ve ayrıca her şey dikey olarak hizalandığından çocukların nasıl Flexbox sarmalayıcıları haline geldiğini göreceksiniz.

Dış sargı:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

İç sarmalayıcılar:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

CodePen'de Pen Flexbox @Toptal - Verebileceğimiz gerçek kullanımlar - DD (@Diegue) tarafından yazılan Half-bleed bölümüne bakın.

Tam genişlikte Navbar Düğmeleri

Tam genişlikte bir gezinme çubuğu, öğelerin sayısından bağımsız olarak, aynı gezinme çubuğu öğeleri satırındaki alanı eşit olarak dağıtır.

Aşağıdaki örnekte, bu davranışa sahip olmayan bazı ikonik düğmeler de var ve bu ikisini istediğiniz şekilde birleştirebileceğinizi gösteriyor. Flexbox olmadan, bu tür mizanpajları elde etmek için kullanılabilir alanı hesaplamak için JavaScript kodu gerekir ve ardından hangi düğmelerin yayılıp hangilerinin yayılmadığına bağlı olarak bunu programlı olarak dağıtırdı.

Flexbox bunu çok daha basit hale getirir.

Sarıcı özellikleri:

 .navbar { display: flex; }

Yayılan alt özellikler:

 .navbar-item { flex-grow: 1; /* They will grow */ }

Yayılmayan alt özellikler:

 .navbar-other { flex-grow: 0; // They won't grow } 

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Verebileceğimiz gerçek kullanımlar - Tam çerçeve düğmeleri gezinme çubuğuna bakın.

bulanıklıklar

Farklı projelerde simgeler ve metin içeren bir dizi bilgi kutusunu kaç kez uygulamak zorunda kaldınız?

Öğelerin bu dağılımı çoğunlukla dijital pazarlamada faydalıdır ancak yazılım geliştirmede başka kullanımları olabilir. Flexbox'ın gücüyle, bir tür ızgara ayarlayabilir ve kaç tane olduğuna bakılmaksızın öğeleri hizalayabilirsiniz.

Sarıcı özellikleri:

 .wrapper { display: flex; flex-wrap: wrap; }

Alt özellikler:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Tablet ve mobil görünüm alanları için genişlik %50 ile %100 arasında değişir.

CodePen'de Pen Flexbox @Toptal - Verebileceğimiz gerçek kullanımlar - Blurbs by DD (@Diegue) konusuna bakın.

Tarayıcılar Arası Uyumluluğu Geliştirme

Flexbox'ın sözdizimi, farklı tarayıcı sürümlerinde birçok kez değişti. Bu, Flexbox ile bir düzen uygularken ve özellikle Internet Explorer'ın eski sürümleri olmak üzere eski web tarayıcılarını desteklemeye çalışırken bir sorun olabilir.

Neyse ki, kodunuzun en geniş web tarayıcıları yelpazesinde çalışmasını sağlamak için birçok teknik ve geçici çözüm, harika bir kaynak olan Flexbugs'ta listelenmiştir. Bu sitedeki bilgileri takip ederseniz, farklı web tarayıcılarında daha iyi ve tutarlı sonuçlar elde edersiniz.

Ön ek görevleri bu konuda özellikle yararlıdır. CSS kurallarının ön ekini otomatikleştirmek için aşağıdaki araçlardan birini seçebilirsiniz:

Yakut:

• Otomatik Ön Düzeltici Raylar
• Aracı Otomatik Önek Oluşturucu

Node.js:

• PostCSS Otomatik Ön Eki
• Grunt Otomatik Önek Oluşturucu
• Gulp Otomatik Ön Eki

Akıllı Düzenler Oluşturmaya Başlayın

Flexbox, çalışmalarımızı hızlandırmak, cilalamak ve ölçeklendirmek için harika bir araçtır. Sınır sadece geliştiricinin hayal gücündedir.

Bir sonraki düzeninizi planlamak için biraz görsel yardıma ihtiyacınız varsa, bu temiz oyun alanını deneyebilirsiniz:

CodePen'de DD (@Diegue) tarafından kalem Flexbox @Toptal - Flexbox oyun alanına bakın.

Yeni bir pencerede açın.

Modern web tarayıcılarının çoğu kullanıcı tarafından artan oranda benimsenmesiyle, Flexbox'ı kullanmak, karmaşık JavaScript koduna dalmanıza veya ağır CSS oluşturmanıza gerek kalmadan kolayca harika mizanpajlar oluşturmanıza olanak tanır.