CSS3 | Flexbox Nedir?
- Flexbox özelliği, CSS üçüncü sürüm ile tanıtıldı.
Flexbox ne işe yarıyor?
Flexbox, belli bir container içindeki elemanları istediğimiz gibi yerleştirme imkanı sunuyor.
Flexbox’tan önce ne kullanılıyordu?
Flexbox’tan önce öğeleri hizalamak için float kullanılırdı. Float kullanmak ön yüz geliştiriciler için hiç efektif değildi birçok hack yapmak zorunda bırakıyordu..
Flexbox neyi kolaylaştırdı?
Flexbox, float kullanmadan nesneleri kolayca hizalamamızı kolaylaştırdı. Flexbox sayesinde belirli bir container içindeki elemanları istediğimiz gibi yerleştirebiliyoruz.
- Flexbox temelde modern bir düzen modudur.
- Flexbox özelliğini kullanmak için display özelliğine flex atarız. Tıpkı display:block, display:inline veya display:inline-block gibi.
- Flexbox sayesinde öğeleri hem yatay hem de dikey olarak hizalayabiliriz. Bu hizalamayı flex-direction:row ve flex-direction:column ile yaparız.
- Bir container div’ine veya herhangi bir container öğesine display:flex özelliğini atarsak bir flex container oluşturulur. Yukarıda olduğu gibi.
- Yukarıda soldan sağa giden bir ana eksenimiz ve yukarıdan aşağıya giden bir çapraz eksenimiz var.
- Display:flex sayesinde bu esnek container’in içindeki her şey bir esnek öğe olacaktır ve varsayılan olarak bir satırda yatay olarak hizalanacaktır.
Flexbox Fundamentals:
Container(kapsayıcı)’da çalışan özellikler( properties for the flex container ) :
Flex-direction :
Esnek öğelerin esnek container’a yerleştirildiği yönü tanımlar.
Bir container’a display:flex özelliği verildiği an da flex-direction varsayılan olarak row gelir. Yani container içindeki divler yatay olarak hizalanır. Eğer dikey olarak hizalanmasını istersek flex-direction:column dememiz gerekir.
flex-direction : row | row-reverse | column | column-reverse
Flex-wrap :
Flex-wrap özelliği sayesinde öğelerin sarılmasına izin verebiliriz. Flex-wrap’ın varsayılan özelliği ‘nowrap’ dir. Flex-wrap:nowrap ile esnek öğelerin tümü tek bir satıra sığmaya çalışır. Flex-wrap:wrap özelliğiyle ise esnek öğelerimiz sayfa içerisinde sarmalanacaktır.
flex-wrap: nowrap | wrap | wrap-reverse;
Justify-content :
Ana eksen/Yatay eksen ( main axis ) boyunca hizalama yapar.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Align-items :
Get Ahmet Loca’s stories in your inbox
Join Medium for free to get updates from this writer.
Çapraz eksen/Dikey eksen ( cross axis ) boyunca hizalama yapar. Tüm öğeler için geçerli olduğundan öğelerin kendilerine değil container’a yerleştirilir. Align-items’in varsayılan değeri stretch’dir.
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline
Align-content :
Çapraz eksende ( cross axis ) çok satırlı esnek container’larda etkili olur. Tek satırlı container’larda hizalama yapmaz.
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Alt elemanlarda çalışan özellikler (properties for the flex items ) :
align-self :
Alt elemandaki kutuları tek tek hizalamamızı sağlar.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex-grow :
flex-grow özelliği, öğeleri esnek kabın içinde genişletir. Örneğin, üç tane kutum olsun(box-1,box-2,box-3) ve bu kutuları bir container’a alıyım. Eğer container’imda boşluk var ve ben bu boşlukları değerlendirmek istiyorsam şunu yapabilirim:
.box-2 { flex-grow:1;} özelliği atarım. Bu özellik container içindeki boşluklara yayılacaktır. Eğer başka bir kutuya da {flex-grow:1;} dersem boşlukları eşit bölüşeceklerdir.
flex-shrink :
Flex-shrink özelliği, öğeleri esnek kabın içinde küçültür.
flex-basis :
Flex-basis özelliği, kalan alan dağıtılmadan önce bir öğenin varsayılan boyutunu tanımlar.
flex:
Bu, esnek büyüme, esnek küçültme ve esnek temelin bir arada kullanıldığı kısaltmadır.
Flex: <flex-grow> <flex-shrink> <flex-basis>
order :
Order özelliği, esnek containerda divlerin sırasını kontrol eder.
Order özelliği daha çok responsive yapılarda önemli oluyor. Mesela ekran küçüldüğünde bazı divlerin konumlarını değiştirmek isteyebiliriz.
Kaynakça :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Traversy Media on Youtube channel : https://www.youtube.com/watch?v=3YW65K6LcIA
Adem İlter on YouTube channel : https://www.youtube.com/watch?v=_s15i3MoAyE&t=1s
Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim.
İletişim kanalları: Twitter — LinkedIn — Mail
Bir sonraki yazıda görüşmek üzere!
