"Enter"a basıp içeriğe geçin

Flexbox Nedir? Nasıl Kullanılır?

Last updated on 10 Aralık 2020

Flexbox Nedir, CSS dünyasında Flex ve grid altyapısı kullanılarak çok gelişmiş responsive projeler ortaya koyabilmekteyiz. Benim flexbox yapısını kullandığım nokta React Native ile mobil geliştirme olduğundan aktif bir şekide daha çok mobil dünyasında kullanmaktayım. Makale içerisindeki bilgilerin hem web hem hem de mobil dünyasını kapsadığını belirtmekte fayda var.

Flexbox Nedir? Nasıl Kullanılır?

Flexbox Nedir? Nasıl Kullanılır?

Flexbox ile alakalı çok güzel bir medium kaynağı buldum ve medium makalesi içerisinde yer alan cheatsheet görsellerini sizlerle muhakkak paylaşmam gerektiğini düşündüm.

Alttaki görsellerin tamamı https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc makalesinden alınmıştır.

Flex Nedir?

Flex, birden fazla Sütunu(column) ve içerik satırını(row) ana kapsayıcı boyunca otomatik olarak boyutlandırmak için kullanılan bir dizi kuraldır. flex yapısını kullanmaya başlamak için alttaki display css özelliğine flex değerini vermek yetiyor bundan sonraki özellikleri bu özellik üzerine destekleyerek ilerleyeceğiz.

Diğer bir çok CSS özelliğinden farklı olarak, Flex’te bir ana element ve onun altında barınan elementler yer almaktadır. Bazı CSS özellikleri sadece ana element’ler üzerinden kullanılabilirken bazıları direkt alt elementler tarafından kullanılabilmektedir.

Bir flex elementini display: flex ile stil uygulanmış ana element olarak düşünebilirsiniz. Bu ana element altında tanımlanan tüm öğeler ana element’in alt flex elementleri olarak kabul edilir.

Üstteki diagram’da her bir flex container’ının yer aldığı flex-start ve flex-end noktaları gösterilmektedir.

Elementleri yatay(Main Axis – justify) yada dikey(Cross Axios – align) olarak listeleme yapabilirsiniz. Varsayılan olarak elementler yatay’da listelenmektedir.

Eğer 3 sütun ve 6 elemanınız varsa ikinci satır otomatik olarak oluşturulacak ve geriye kalan 3 elemanınız otomatik olarak alt satıra geçişi sağlanacaktır. Bu durum için ekstra olarak bir media yada farklı stil tanımlaması yapmanıza gerek yoktur.

Üstteki paragraftaki senaryonun örnek ekran görüntüleri ise şöyledir.

Flex Direction Reverse

Main-Axis ekseninde eşit boyutlarda dağıtılan öğelerin özellikleri ve değerlerini aşağıdaki örneklerde göreceğiz.

Kolon sayısı 3 olarak belirtildiğine her bir üçlük kısmın ayrı satırlarda eşit alanlarda otomatik olarak dağıtıldığını görüyoruz kolonları sayısını nasıl belirlediğimizi görmek için aşağıdaki örneklere bekleriz 🙂

Satırların ve sütunların ana öğenin içine nasıl dağıtıldığı, Alttaki örneklerde gösterilecek olan CSS Flex özellikleri flex-direction, flex-wrap ve diğerleri tarafından belirlenir.
Burada bir konteyner içine yerleştirilmiş keyfi bir n-sayıda öğemiz var. Varsayılan olarak, öğeler soldan sağa doğru listelenir. Bununla birlikte, başlangıç ​​noktası tersine çevrilebilir. Tersine çevirme ile ilgili kod örneğini bir alttaki örnek görselde görebilirsiniz.

Direction – Yön

İsterseniz akışı ters yönüne çevirerek en son listelenen elemanın ilk sırada listelenmesini sağlayabilirsiniz.

Flex Direction Reverse

Wrap – Sarma

Flex Wrap

flex-wrap: wrap – Üst konteynerin alanı dolduğunda öğelerin nasıl sarılacağını belirler.

Flow – Akış

Flex Flow

flex-flow flex-direction ve flex-wrap özelliklerini bir özellikte tanımlamak için kullanılabilecek bir özelliktir.

Flex Flow

Üstteki görüntüde görüldüğü gibi kullanmış olduğumuz flex-flow: row wrap kodu flex-direction: row ve flex-wrap: wrap kodlarının kısa bir şekilde tanımıdır.

Flex-Flow: Row Wrap-Reverse

flex-flow: row wrap-reverse

Flex-Flow Row Wrap Justify Content Space Between

flex-flow:row wrap; justify-content: space-between;

Üstteki örnekte daha sonra göreceğimiz justify-content özelliğinin değeri space-between yaparak elemanlar arasında eşit şekilde boşluk bıraktık ve konteyner’a tam sığdırılması sağladık.

Flex Flow Row Reverse Wrap

flex-flow:row-reverse wrap;

Flex Flow Row Reverse Wrap Reverse

flex-flow:row-reverse wrap-reverse;

Flex Flow Row Wrap Justify Conten Space Between

flex-flow:row wrap; justify-content: space-between;

Flex Direction Column ve Column Reverse

Elemanların dikey’de listelemek için flex-direction: column; kodunu kullandık.

Flex Wrap Wrap Reverse

flex-wrap: wrap-reverse;

justify-content

Justify Content

Altta ki animasyonda üstteki justify-content değerlerinin responsive olarak nasıl bir etkisi olduğu gösterilmektedir.

Justify Content Animasyonlu

flex-direction:row; justify-content: flex-start |flex-end |center|space-between |space-around |stretch |space-evenly. Örneklerimizde her bir satır için 3 kolon kullandık ama satırlar içerisinde tanımlayacağınız kolonların sınırı bulunmamaktadır.

Flex Direction Column Justify Content

Şimdide yatay’da tanımladığımız flex öğelerinin responsive olarak nasıl davrandığını animasyonlu olarak görelim.

Flex Direction Column Justify Content Animasyon

Şimdide flex-direction: row ile beraber align-content özelliğini kullanarak alt elemanları toplu olarak konumlandırma yapabiliriz justift-content’de olduğu gibi.

Flex Direction Row

flex-direction: column ile align-content özelliğinin ortak olarak kullanılması ile kullanılabilecek tüm değerlerin nasıl bir etki oluşturduğuna alttaki görselden gözatabilirsiniz.

Flex Direction Column

align-items

Align-items ana öğeye göre öğelerin yatay olarak hizalanmasını denetler.
Align Items

flex-basis

Flex Basis

Üstteki görselden dolayı aslında çok fazla açıklamaya gerek duymayan bu özelliğin amacı auto değeri ile elemanların boyutunun içeriğe göre otomatik olarak ayarlanması sağlanabilir yada ikinci örnekte görüldüğü gibi tüm elemanların minimum 50px olarak gözükmesi sağlanabilir.

flex-grow

Bu özellik ile konteyner içerisinde tanımlı olan elemanların her birinin aynı boyutta değil de belirttiğimiz bazı elemanların diğer elemanlara göre daha büyük gözükmesini sağlayabiliriz.

Flex Grow

Üstteki görselde 3 farklı örnek görüyoruz ilk örnekte tüm öğelerin flex-grow değerinin 1 olarak ayarlandığını görüyoruz böylelikle eşit şekilde bir boyut dağılımını görüyoruz ama ikinci örnekte 2.elamanın flex-grow değer 7 olduğundan diğer elemanlara göre 7 kat daha büyük gözükmesi sağlanmış. 3.örnekte ise 6.elemanın flex-grow değerinin 3 ve 13.elemanın flex-grow değeri 5 olarak ayarlandığını görüyoruz.

flex-shrink

Flex Shrink 1

flex-grow’un tam tersi yöntemle çalışmaktadır 5.elemanın flex-shrink değeri 7 olarak belirlendiğinde 1/7 oranında daraltılmış şekilde gösterimi sağlanır.

Flex Shrink 2

flex özelliğinin değerine kısayoldan direkt olarak flex-grow flex-shrink ve flex-basis değerlerini tanımlayarak kullanabilirsiniz.

order

Order özelliğini kullanarak elemanların sıralamasını yeniden düzenleyebilirsiniz.

Flex Order

justify-items

Justify Items

Flex box kodlarının çıktısını direkt web üzerinde görmek için http://www.csstutorial.org/flex-both.html adresine gözatabilirsiniz.

Ayrıca interaktif olarak sizi kodlama yapmaya yönlendirerek flex’i öğrenmenizi sağlatan https://flexboxfroggy.com/ sitesine de gözatmanızı öneririm.


📚 Flexbox Nedir Benzeri Konular


Lütfen Flexbox Nedir ile alakalı olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından Flexbox Nedir adlı makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

İlk Yorumu Siz Yapın

    Bir cevap yazın

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir