CSS Flex nedir ya da eski tabirle flexbox nedir ? Nasıl kullanılır ? Bugün sizlere kapsamlı projelerde işinizi kolaylaştıracak bir CSS özelliğinden bahsetmek istiyorum. Özellikle karmaşık yerleşime sahip web sitelerinde bu özelliğin işinize çok yarayacağını düşünüyorum.

CSS display : flex geçmişi 2009 yılına dayanan 2 kez güncelleme geçirmiş son kararlı sürümü 2012 yılında oluşan yapısal düzenleme özelliğidir.Yapısal düzenleme derken neyi kastediyorum şöyle açıklayım.Bu özellik site yapısını şekillendirmeye yarıyor.Site içerisinde ki elemanları yatay ve dikey de rahat bir şekilde düzenlemek ve hizalamak için kullanılabilecek en kolay CSS yöntemi.

Flex Yapısının Avantajları

1. Flex yani esnek bir yapı oluşacağından siteyi responsive tasarım yapmak daha kolay olacaktır
2. İçerikleri sağa ve sola yaslarken float kullanmanıza gerek kalmayacak.Bu da site yapısının bozulmasını engelleyecek.Flex parametreleri ile bu işlem oldukça basit
3. Elemanların boyutlarını esnek bir şekilde ayarlayabileceksiniz.
4. Dikey de ortalama ve hizalama bu özellik ile çok kolay

Flex Yapısının Dezavantajları

1. Tarayıcı desteği henüz istenen seviyede değil.
2. Kişiye göre değişmekle birlikte flex yapsını kavramak zor olabiliyor

CSS Flex Nedir, Nasıl Kullanılır?

Flex, bir kapsayıcı eleman ve o elemana ait iç elemanlara etki eder.Bir önceki yazımda html elemanlarının varsayılan olarak block ya da inline düzeyde elementler olduklarını yazmıştım.Yazıyı okumanızda fayda var.HTML elemanların block veya inline olmalarını CSS display özelliği sağlamaktadır.Flex de aynı şekilde display özelliğinin bir parametresi olarak kullanılır.Kullanımı display: flex;

Flex uygulamamız için bir tane kapsayıcı elemanımız ve ona ait iç elemanlarımız olması gerekiyor.Hem flex kapsayıcı elemanı hem de ona ait flex elemanları için farklı parametreler ya da özellikler uygulanıyor.Bunlar aşağıda flex kapsayıcı eleman özellikleri ve flex eleman özellikleri olarak iki başlık altından anlatıldı.Bir elemana mesela bir div elementine display:flex özelliği verirseniz bu kapsayıcı eleman olacak ve bu div içerisinde ki elemanlarda otomatik olarak flex elemanları olacaktır.Aşağıdaki resim de kahverengi olan kısım bizim flex kapsayıcı elemanımız, sarı kutularda bu kapsayıcı içerisinde ki flex yerleşimine zorlanan elemanlarımızdır.Özellikleri anlatırken bu renklendirmeden yararlandım.Daha iyi anlamak için açıklamalarla birlikte resimlerden yararlanabilirsiniz.

Flex Kapsayıcı Özellikleri

Bu özellikler kapsayıcı elemana verilecek olan özelliklerdir.

display:flex

Elemanın görünüm (display) özelliğini flex olarak belirtmemiz gerekiyor.Aynı block veya inline elementler gibi, flex özelliklerini sağlaması için bu gerekli.Görünüm özelliğine flex verdiğimizden bu eleman artık kapsayıcıdır.
Farklı tarayıcılar için uyumlu kullanım şekli

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

flex-direction

Flex kapsayıcısı içerisindeki elamanlarının yatay veya dikey olarak hizalanmalarını sağlayan özelliktir.4 parametre alır.Varsayılan olarak row kullanılır.Örnek kullanım: flex-direction: row;

1. flex-direction:row(varsayılan) elemanların yatayda soldan sağa doğru hizalanmalarını sağlar
2. flex-direction:column elemanların dikeyde yukarında aşağıya hizalanmalarını sağlar
3. flex-direction:row-reverse row un tersidir.
4. flex-direction:column-reverse column un tersidir.

Farklı tarayıcılar için uyumlu kullanım şekli

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

flex-wrap

Kapsayıcı içerisinde ki elemanların, kapsayıcı genişliğini aştığında aynı satırda devam mı edeceklerini yoksa bir alt satıra mı geçeceklerini belirtir.3 değer alır.Örnek kullanım: flex-wrap: nowrap;

1. nowrap : Elemanlar kapsayıcı genişliğini aştığında aynı satırda devam ederler
2. wrap : Elamanlar kapsayıcı genişliğini aştığında aşan eleman yada elemanlar bir alt satıra geçer.
3. wrap-reverse : Elemanlar kapsayıcı genişliğini aştığında bir alt satıra değilde bir üst satıra geçerler.

Farklı tarayıcılar için uyumlu kullanım şekli

-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;

flex-flow

Bu parametre flex-direction ve flex-wrap özelliklerini birlikte kullanılmasını sağlar.Örnek kullanım: flex-flow: row wrap; şeklindedir.

justify-content

Kapsayıcı içerisindeki elemanların yatay (x ekseni) eksende nasıl hizalanacağını belirler.5 değer alır.flex-end resimde biraz içerde gözüküyor normalde sağa yapışık olacaktı (resim hatası).Örnek kullanım: jusitify-content:flex-start;

1. flex-start: Esnek kapsayıcı içerisindeki elemanları kapsayıcının başından başlayarak sıralar
2. flex-end:Kapsayıcı içerisinde ki elemanları kapsayıcının sonundan başlayarak sıralar
3. center:Kapsayıcı içerisindeki elemanları kapsayıcı içerisinde ortalar
4. space-around:Kapsayıcı içerisindeki elemanların sağ ve sol boşluklarını eşitleyerek kapsayıcı içerisine dağıtır.
5. space-between:Kapsayıcı içerisindeki elemanları kapsayıcı içerisine baştan ve sondan hizalayarak dağıtır.

Farklı tarayıcılar için uyumlu kullanım şekli

-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;

align-items

Kapsayıcı içerisindeki elemanları dikey eksende hizalanmasını sağlar.justify-content’in tersi olarak düşünebilirsiniz.5 değer alır.flex-end resimi çıkmamış.Flex-startın tam tersi aşağıdan başlıyor sarı kutular.Örnek kullanım: align-items:center;

1. flex-start: Esnek kapsayıcı içerisindeki elemanlarının dikeyde birbirlerine üst noktalarından hizalanmalarını sağlar.
2. flex-end:Kapsayıcı içerisinde ki elemanları dikeyde birbirlerinin alt noktalarınından hizalanmalarnı sağlar
3. center:Kapsayıcı içerisindeki elemanları dikeyde birbirlerinin orta noktalarının hizalanmalarını sağlar.
4. stretch:Kapsayıcı içerisindeki elemanların kapsayıcının yüksekliğine göre her elemanın aynı boyutta kapsayıcıyı doldurmasını sağlar
5. baseline:Kapsayıcı içerisindeki elemanları içerisindeki ilk satıra göre hizalanmalarını sağlar.

Farklı tarayıcılar için uyumlu kullanım şekli

-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

align-content

Align-content kapsayıcı içerisinde tek satırdaki elemanları değil de birden fazla satırdaki elemanları dikeyde hizalamayı sağlar.Yukarıdaki resme bakıp align-items ve justify-content ile karşılaştırırsanız farkı daha rahat anlarsınız.6 değer alır.Örnek kullanım: align-content:space-between;

1. flex-start:Kapsayıcı içerisindeki eleman satırlarını en yukardan başlayarak hizalar
2. flex-end:Kapsayıcı içerisindeki eleman satırlarını en aşağıdan başlayarak hizalar
3. center:Kapsayıcı içerisindeki eleman satırlarını ortalayarak hizalar<
4. stretch:Kapsayıcı içerisindeki eleman satırlarını kapsayıcı içerisine dikeyde doldurur.
5. space-around:Kapsayıcı içerisindeki eleman satırlarını aralarında eşit mesafe ile dağıtır
6. space-between:Kapsayıcı içerisindeki eleman satırlarını baştan ve sondan hizalayarak dağıtır.

Farklı tarayıcılar için uyumlu kullanım şekli

-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;

Flex Elemanların Özellikleri

Yukarıdaki özellikler flex kapsayıcısına aitti.Aşağıdaki özellikler ise esnek kapsayıcı içerisinde ki elemanlara verilebilecek özellikleri içermektedir.

order

Normalde HTML elemanları yazıldığı sıraya göre listelenir.Fakat order ile bu sıralamayı değiştirebilirsiniz.Birinci sırada yazdığınız bir elemanı order 3 vererek 3. sıraya alabilirsiniz.

flex-grow

Flex-grow ile elemana esnek genişlikler verebilirsiniz.Üç adet kutu olduğunu düşünelim.İki kutuya flex-grow: 1 değerini diğer kutuya da flex-grow:2 değerini verelim.Flex-grow:2 değerini alan kutu diğerlerine göre 2 kat daha geniş olacaktır.Varsayılan değer 0 dır

flex-shrink

Flex-shrink değeri flex elemanlarını daraltmak için kullanılır.Varsayılan değeri 1 dir.Eğer bir eleman 2 değeri alırsa diğerlerine göre 2 kat daralır.

flex-basis

Elemanın, kapsayıcı içerisindeki boş alana göre alacağı varsayılan genişliğini belirlemede kullanılır.Varsayılan değeri autodur.

flex

Yukarıdaki 3 özellik (flex-grow, flex-shrink, flex-basis) için kısayoldur.Varsayılan değeri 0 1 auto dur.

align-self

Bu özellik flex elemanın diğer elemanlara göre farklı hareket etmesini sağlar.Yani bu değeri alan bir eleman, flex kapsayıcısında tanımlı olan yapını dışarısına çıkabilir.Örneğin flex kapsayıcısı “align-items flex-start” olarak tanımlıysa, elemanlar kapsayıcı içerisinde yukarı noktalarından hizalanır.Ama içlerinden bir elemana align-self:flex-end değeri atanırsa o eleman kapsayıcıda alt noktadan hizalanacaktır.

Tarayıcı Destekleri
Tarayıcı destekleri 2018 itibari ile değişiklik gösterdi.Bu yüzden bu kısma güncelleme gelmesi gerektiğini düşündüm.

Şuan için CSS Flex özelliği bütün güncel tarayıcılar tarafından destekleniyor.Yazının ilk versiyonunda belirtiğim gibi İnternet Explorer 10 ve 11 bazı özellikleri desteklemiyor zaten gerekte yok.Artık Edge tarayıcısı ile devam edecekler ve IE miladını doldurdu.

Onun dışında tarayıcı desteklerin de en büyük değişiklik mobil tarafında gerçekleşti.Mobil tarayıcıların tamamı (iOS Safari, Android Kendi Tarayıcısı, Crome Adroid) bu özelliği destekliyor.

Diğer tarayıcılar için detaylara buradan bakabilirsiniz.

• Chrome : 21+ (-webkit- ön eki ile), 29+ (ön eksiz)
• Firefox : 28+
• Internet Explorer : 10(-ms- ön-eki),11+
• Safari : 6.1+(-webkit- öneki ile)
• Opera : 17+

CSS Flex Hakkında Diğer Yazılar

Flex yapılarla ilgili daha detaylı bir şeyler okumak isterseniz, sizin için yararlı olacağını düşündüğüm aşağıdaki yazıları listeledim.Fazla bilgi zararlı olmaz neticede.

• Flex Uygulamaları ile Daha Kolay Öğrenin
• Yenilenmiş Flex(Esnek Kutu) Modülü
• A Complete Guide to Flexbox
• Are We Ready to Use Flexbox?

Yazı Hakkındaki
Bu yazıda CSS’in eski ama güncellenerek yepyeni ve güçlü bir hale gelen display:flex özelliği hakkında bilgilendirmeye çalıştım.Yazının başında flexbox yapısının geçmişini,daha sonra flex parametrelerini ve tarayıcı destek durumları hakkında bilgi vermeye çalıştım.Yazının sonunda da farklı kaynaklardan yararlanmanız için flexbox hakkında yazılmış diğer yazıları sundum.CSS ile ilgili bir sonra ki yazım Responsive Tasarım ile ilgili olacak.

Her türlü düşünceye açığız.Lütfen yorum bırakmayı ihmal etmeyin.Bilgi paylaştıkca çoğalır.Yazımızı beğendiyseniz paylaşın, herkes faydalansın.

Kaynak

• https://wreply.com/css-flex-yapisi-kapsamli-anlatim.html