Tasarım Kodlama

CSS Flex Kullanımı

Bu yazıyı kendime CSS flexbox düzeni için kapsamlı bir içerik oluşturması için hazırladım. Bu eksiksiz yazı, ana öğe (flex container) ve alt öğeler (flex itemler) için tüm farklı olası özelliklere odaklanarak flexbox hakkında detaylı bir klavuzu oluşturmaktadır.

CSS Flexbox Yerleşimi

Flexbox Yerleşim modülünden önce dört düzen modu vardı:

  • Block, web sayfaları için yerleşim modülü
  • Inline, metin içi
  • Table, iki boyutlu tablo
  • Position, bir elemanın açık konum

Flexbox Yerleşim Modülü, float veya konumlandırma kullanmadan flex duyarlı düzen yapısını tasarlamayı kolaylaştırır.

Flexbox Elementi

Flexbox modelini kullanmaya başlamak için önce bir flex container tanımlamanız gerekir.

Yukarıdaki öğe, üç flex öğeye sahip bir flex kapsayıcıyı (yeşil alanı) temsil eder.

display özelliği

Bu, bir esnek kabı tanımlar; verilen değere bağlı olarak satır içi veya blok. Tüm doğrudan çocukları için esnek bir bağlam sağlar.

Verilen değere bağlı olarak esnek bir containerı temsil eder. Bu kasayıcı(container) tüm çocuklar için inline yada block bir bağlamı ifade etmektedir.


flex-direction özelliği

Bu, ana ekseni oluşturur, böylece esnek öğelerin esnek konteynere yerleştirilme yönünü tanımlar. Flexbox, (isteğe bağlı sarmanın yanı sıra) tek yönlü bir düzen konseptidir. Flex öğeleri öncelikle yatay sırayla veya dikey sütunlarla düzenlenmiş olarak düşünün.

column değeri, flex öğeleri dikey olarak dizer:

column-reverse değeri,flex nesneleri tersten dikey olarak dizer:

row değeri, flex öğeleri yatay olarak dizer:

row-reverse değeri, flex nesnelerini yatay olarak tersten dizer:


flex-wrap özelliği

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.

Aşağıdaki örnekler, flex-wrap özelliğini daha iyi göstermek için 8 flex öğeye sahiptir.

wrap değeri, esnek öğelerin gerekirse sarılacağını belirtir:

nowrap değeri, flex öğelerinin sarmalanmayacağını belirtir (bu varsayılandır):

wrap-reverse değeri, esnek öğelerin gerekirse ters sırada kaydırılacağını belirtir:


flex-flow özelliği

Bu, ifade flex-direction ve flex-wrap özelliklerinin kısaltmasıdır. Varsayılan değer row nowrap şeklindedir.


justify-content özelliği

Bu, ana eksen boyunca hizalamayı tanımlar. Bir satırdaki tüm flex öğeler flex olmadığında veya flex 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.

center değeri, flex öğeleri kapsayıcının ortasına hizalar.

flex-start değeri, flex öğeleri containerın başlangıcında hizalar (bu varsayılandır).

flex-end değeri, esnek öğeleri kabın sonundaki hizalar.

space-around değeri, öğelerin çevrelerinde eşit boşluk kalacak şekilde satırda eşit olarak dağıtılır. Tüm öğeler her iki tarafta eşit alana sahip olduğundan, görsel olarak boşlukların eşit olmadığını unutmayın. İlk öğe, kap kenarına karşı bir birim alana sahip olacak, ancak sonraki öğe arasında iki birim boşluk olacaktır, çünkü sonraki öğenin kendi aralığı geçerli olacaktır.

space-between öğeler satırda eşit olarak dağıtılır; ilk öğe başlangıç satırındadır, son öğe bitiş satırındadır.

space-evenly, öğeleri, herhangi iki öğe arasındaki boşluk (ve kenarlara kadar olan boşluk) eşit olacak şekilde dağıtılır.


align-items özelliği

Bu, flex öğelerin geçerli satırdaki çapraz eksen boyunca nasıl yerleştirileceğ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.

center değeri, flex öğeleri kapsayıcının ortasına hizalar.

flex-end değeri, flex öğeleri kapsayıcının alt kısmına hizalar.

stretch değeri, flex öğeleri kabı dolduracak şekilde uzatır (bu varsayılandır).

baseline değer, flex öğeleri, taban çizgileri hizalaması gibi hizalar.


align-content özelliği

Bu, çapraz eksende fazladan boşluk olduğunda flex bir kabın çizgilerini hizalar; justify-contentin ana eksen içindeki tek tek öğeleri hizalaması gibidir.

space-between değeri, flex çizgileri aralarında eşit boşlukla görüntüler.

space-around değeri, esnek çizgileri öncesinde, arasında ve sonrasında boşlukla birlikte görüntüler.

stretch değeri, kalan alanı kaplayacak şekilde esnek çizgileri uzatır (bu varsayılandır).

center değer ekranları, kapsayıcının ortasındaki esnek çizgileri görüntüler.

flex-start değeri, kapsayıcının başlangıcındaki esnek çizgileri görüntüler,

flex-end değeri, kapsayıcının sonundaki flex çizgilerini görüntüler.

Ekranın ortasına div yerleştirme

Ekranın ortasına bir nesneyi yerleştirmek için body nesnesini flex nesnesi yapıp içindeki öğleri yatayda ve dikeyde hizlayanilirsiniz.

CSS Flex Öğeleri

Alt Öğeler (Öğeler)

Bir flex kapsayıcı doğrudan alt öğeleri otomatik olarak flex (esnek) öğeler haline gelir.

Flex öğe özellikleri şunlardır:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order özelliği

Varsayılan olarak, esnek öğeler kaynak sırasına göre düzenlenir. Ancak order özelliği, esnek kapsayıcıda göründükleri sırayı denetler.

flex-grow özelliği

flex-grow özelliği, flex öğelerin geri kalanına göre bir esnek öğenin ne kadar büyüyeceğini belirtir.

flex-shrink özelliği

flex-shrink özelliği, bir flex öğesinin kalan flex öğelere göre ne kadar küçüleceğini belirtir.

flex-basis özelliği

flex-basis özelliği, bir flex öğesinin başlangıç uzunluğunu belirtir.

flex özelliği

flex özelliği, flex-grow, flex-shrink ve flex-basis özellikleri için kısa bir özelliktir.

align-self özelliği

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.

Üçüncü flex öğeyi kapsayıcının ortasına hizalar.

İkinci esnek öğeyi kapsayıcının üst kısmına ve üçüncü esnek öğeyi kapsayıcının alt kısmına hizalar.

Kaynak

https://www.w3schools.com/css/css3_flexbox_container.asp

css-tricks.com/snippets/css/a-guide-to-flexbox/

https://www.w3.org/TR/css-flexbox/

1 yorum