CSS3 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.
CSS3 Flexbox Nedir? Nasıl Kullanılır? Detaylı Flexbox Eğitimi
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.
1 | display: flex; |
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.
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 🙂
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.
Wrap – Sarma
flex-wrap: wrap – Üst konteynerin alanı dolduğunda öğelerin nasıl sarılacağını belirler.
Flow – Akış
flex-flow flex-direction ve flex-wrap özelliklerini bir özellikte tanımlamak için kullanılabilecek bir özelliktir.
Ü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; justify-content: space-between;
Üstteki örnekde daha sonra göreceğimiz justify-content özelliğinin değeri space-between yaparak elemanlar arasında eşit şekilde boşluk bırarak konteyner’a tam sığdırılması sağlanmıştır.
flex-flow:row-reverse wrap;
flex-flow:row-reverse wrap-reverse;
flex-flow:row wrap; justify-content: space-between;
Elemanların dikey’de listelemek için flex-direction: column; kodunu kullandık.
flex-wrap: wrap-reverse;
justify-content
Altta ki animasyonda üstteki justify-content değerlerinin responsive olarak nasıl bir etkisi olduğu gösterilmektedir.
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.
Şimdide yatay’da tanımladığımız flex öğelerinin responsive olarak nasıl davrandığını animasyonlu olarak görelim.
Ş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: 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.
align-items
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.
Ü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-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 ö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.
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.
📚 CSS3 Flexbox Nedir Benzeri Konular
✍ Lütfen CSS3 Flexbox Nedir ile alakalı olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından CSS3 Flexbox Nedir adlı makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
