CSS Flexbox
Bu yazımda size Loadium ve Testinium projelerinde de sıklıkla kullandığım CSS Flexbox kullanımını ana öğe (flex container) ve alt öğeler (flex items) için tüm farklı olası özelliklere odaklanarak anlatımını yapacağım.
Önceden öğeleri hizalamak için float, text-align, position gibi css özellikler kullanılırdı.Flexbox ile esnek öğe yerleşimlerini yapabiliyoruz.
Flexbox arkasındaki ana fikir, containera ve öğelerine genişliğini / yüksekliğini ve sırasını mevcut alanı en iyi şekilde dolduracak şekilde değiştirme yeteneği vermektir.
Flexbox bir uygulamanın bileşenleri ve küçük ölçekli layoutlar için en uygun olanı iken, Grid layoutu daha büyük ölçekli layoutlar için tasarlanmıştır.
TERMİNOLOJİ:
Öğeler, main axis (ana başlangıçtan ana uca) veya çapraz ekseni (çapraz başlangıçtan çapraz uca) izleyerek yerleştirilecektir.
- main axis — Bir esnek kabın ana ekseni, esnek öğelerin yerleştirildiği birincil eksendir. Burda dikkat edilmesi gereken nokta mutlaka yatay değildir; esnek yön özelliğine bağlıdır.
- main-start | main-end — Esnek öğeler, ana başlangıçtan başlayarak ana uca giden kabın içine yerleştirilir.
- main size— Bir esnek öğenin genişliği veya yüksekliği, hangisi ana boyutta olursa, öğenin ana boyutudur. Flex öğesinin ana boyut özelliği, ana boyutta hangisi olursa olsun “genişlik” veya “yükseklik” özelliğidir.
- cross axis— Ana eksene dik olan eksene çapraz eksen denir. Yönü ana eksen yönüne bağlıdır.
- cross-start | cross-end— Esnek çizgiler, öğelerle doldurulur ve esnek kabın çapraz başlangıç tarafından başlayıp çapraz uç tarafına doğru kabın içine yerleştirilir.
- cross size— Esnek bir öğenin genişliği veya yüksekliği, hangisi çapraz boyutta olursa olsun, öğenin çapraz boyutudur. Çapraz boyut özelliği, çapraz boyuttaki “genişlik” veya “yükseklik” değerlerinden hangisidir.
ÖZELLİKLERİ:
Flex modülü kapsayıcı ve öğeler için özellikler sunuyor.
flex container
- display: flex;
Flex bir alan oluşturmamız için olmazsa olmazımızdır esnek bir alan oluşturup containerın içini düzenlememizi sağlar.
- flex-direction: row | row-reverse | column | column-reverse;
Bu, ana ekseni oluşturur, böylece esnek öğelerin flex containera yerleştirilme yönünü tanımlar. Flexbox tek yönlü bir düzen konseptidir. Esnek öğeleri öncelikle yatay sıralarda veya dikey sütunlarda düzenlenmiş olarak düşünün.
- flex-wrap: nowrap | wrap | wrap-reverse;
Varsayılan olarak, esnek öğelerin tümü tek bir satıra sığmaya çalışır. Bu özellik ile bunu değiştirebilir ve öğelerin gerektiği gibi sarılmasına izin verebilirsiniz.
- flex-flow: column wrap;
flex-direction ve flex-wrap özelliklerinin kısaltmasıdır.
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe
Ana eksen boyunca hizalamayı tanımlar. Bir satırdaki tüm esnek öğeler esnek olmadığında veya esnek olduğunda ancak maksimum boyutlarına ulaştığında fazladan boş alan dağıtılmasına yardımcı olur. Ayrıca, satırdan taştıklarında öğelerin hizalanması üzerinde bir miktar kontrol uygular.
- align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe
Esnek öğelerin geçerli satırdaki çapraz eksen boyunca nasıl yerleştirildiğine ilişkin varsayılan davranışı tanımlar. Bunu, çapraz eksen (ana eksene dik) için yaslama içeriği versiyonu olarak düşünün.
- align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe;
Çapraz eksende fazladan boşluk olduğunda esnek bir kabın çizgilerini hizalar, aynı şekilde yaslama içeriğinin ana eksen içindeki tek tek öğeleri hizalaması gibi.
Note: Bu özellik, yalnızca flex-flow’un wrap veya wrap-reverse olarak ayarlandığı çok satırlı esnek kaplarda etkili olur. Tek satırlık flex container (yani esnek akış varsayılan değerine ayarlandığında, sarmasız) hizalama içeriğini yansıtmayacaktır.
flex items
- order: 5 (item number)
Varsayılan olarak, esnek öğeler kaynak sırasına göre düzenlenir. Ancak order, esnek kapsayıcıda göründükleri sırayı denetler.
- flex-grow: 5 (item number)
Bu, esnek bir ürünün gerektiğinde büyüme yeteneğini tanımlar. Oran olarak hizmet eden birimsiz bir değeri kabul eder. Öğenin esnek kabın içinde ne kadar kullanılabilir alan kaplaması gerektiğini belirler. Tüm öğelerin esnek büyümesi 1 olarak ayarlanmışsa, kapta kalan alan eşit olarak dağıtılacaktır. Itemlardan birinin değeri 2 ise, kalan alan diğerlerinden iki kat daha fazla yer kaplar (ya da en azından deneyecektir).
- flex-shrink: 5 (item number)
Bu, esnek bir öğenin gerekirse küçülme yeteneğini tanımlar.
- flex-basis: | auto;
Bu, kalan alan dağıtılmadan önce bir öğenin varsayılan boyutunu tanımlar. Bir uzunluk (ör.% 20, 5rem, vb.) veya bir anahtar kelime olabilir. Auto anahtar sözcüğü, “genişlik veya yükseklik özelliğime bak” anlamına gelir .0 olarak ayarlanırsa, içeriğin etrafındaki fazladan boşluk hesaba katılmaz. Otomatik olarak ayarlanırsa, ekstra alan esnek büyüme değerine göre dağıtılır.
- flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
Bu, esnek büyüme, esnek küçültme ve esnek temelin bir arada kullanıldığı kısaltmadır. İkinci ve üçüncü parametreler (flex-shrink ve flex-base) isteğe bağlıdır. Varsayılan 0 1 otomatiktir, ancak bunu tek bir sayı değeriyle ayarlarsanız, 1 0 olur.
Tek tek özellikleri ayarlamak yerine bu özelliğini kullanmanız önerilir.
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
Bu, bağımsız esnek öğeler için varsayılan hizalamanın (veya hizalama öğeleri tarafından belirtilenin) geçersiz kılınmasına izin verir.
Örnek olarak buradaki containera:
display: flex;
justify-content: center;
align-items: center;
dediğim zaman içerisindeki elemanları yatay ve dikeyde ortalamış oluyoruz.
NOT:
- Float, clear ve vertical-alignın esnek bir öğe üzerinde hiçbir etkisi olmadığını unutmayın.
Faydalı olması dileğiyle…
Kaynaklar:
