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.
1 2 3 4 5 6 7 | <div class="flex-container"> <div>A</div> <div>B</div> <div>C</div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | .flex-container{ display: flex; background-color: #00b894; } .flex-container > div { background-color: #f1f1f1; margin: 10px; padding: 30px; font-size: 40px; } |
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.
1 2 3 4 5 | .flex-container { display: flex; /* yada inline-flex */ } |
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.
1 2 3 4 5 | .flex-container { flex-direction: row | row-reverse | column | column-reverse; } |
column değeri, flex öğeleri dikey olarak dizer:
1 2 3 4 5 6 | .flex-container{ display: flex; flex-direction: column; } |
column-reverse değeri,flex nesneleri tersten dikey olarak dizer:
1 2 3 4 5 6 | .flex-container{ display: flex; flex-direction: column-reverse; } |
row değeri, flex öğeleri yatay olarak dizer:
1 2 3 4 5 6 | .flex-container { display: flex; flex-direction: row; } |
row-reverse değeri, flex nesnelerini yatay olarak tersten dizer:
1 2 3 4 5 6 | .flex-container { display: flex; flex-direction: row-reverse; } |
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.
1 2 3 4 5 | .flex-container { flex-wrap: nowrap | wrap | wrap-reverse; } |
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:
1 2 3 4 5 6 | .flex-container{ display: flex; flex-wrap: wrap; } |
nowrap değeri, flex öğelerinin sarmalanmayacağını belirtir (bu varsayılandır):
1 2 3 4 5 6 | .flex-container { display: flex; flex-wrap: nowrap; } |
wrap-reverse değeri, esnek öğelerin gerekirse ters sırada kaydırılacağını belirtir:
1 2 3 4 5 6 | .flex-container { display: flex; flex-wrap: wrap-reverse; } |
flex-flow özelliği
Bu, ifade flex-direction ve flex-wrap özelliklerinin kısaltmasıdır. Varsayılan değer row nowrap şeklindedir.
1 2 3 4 5 | .container { flex-flow: column wrap; } |
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.
1 2 3 4 5 | .flex-container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; } |
center değeri, flex öğeleri kapsayıcının ortasına hizalar.
1 2 3 4 5 6 | .flex-container { display: flex; justify-content: center; } |
flex-start değeri, flex öğeleri containerın başlangıcında hizalar (bu varsayılandır).
1 2 3 4 5 6 | .flex-container { display: flex; justify-content: flex-start; } |
flex-end değeri, esnek öğeleri kabın sonundaki hizalar.
1 2 3 4 5 6 | .flex-container { display: flex; justify-content: flex-end; } |
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.
1 2 3 4 5 6 | .flex-container { display: flex; justify-content: space-around; } |
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.
1 2 3 4 5 6 | .flex-container { display: flex; justify-content: space-between; } |
space-evenly, öğeleri, herhangi iki öğe arasındaki boşluk (ve kenarlara kadar olan boşluk) eşit olacak şekilde dağıtılır.
1 2 3 4 5 6 | .flex-container { display: flex; justify-content: space-evenly; } |
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.
1 2 3 4 5 | .flex-container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } |
center değeri, flex öğeleri kapsayıcının ortasına hizalar.
1 2 3 4 5 6 7 | .flex-container { display: flex; height: 200px; align-items: center; } |
flex-end değeri, flex öğeleri kapsayıcının alt kısmına hizalar.
1 2 3 4 5 6 7 | .flex-container { display: flex; height: 200px; align-items: flex-end; } |
stretch değeri, flex öğeleri kabı dolduracak şekilde uzatır (bu varsayılandır).
1 2 3 4 5 6 7 | .flex-container { display: flex; height: 200px; align-items: stretch; } |
baseline değer, flex öğeleri, taban çizgileri hizalaması gibi hizalar.
1 2 3 4 5 6 7 | .flex-container { display: flex; height: 200px; align-items: baseline; } |
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.
1 2 3 4 5 6 7 8 | .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-between; } |
space-around değeri, esnek çizgileri öncesinde, arasında ve sonrasında boşlukla birlikte görüntüler.
1 2 3 4 5 6 7 8 | .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-around; } |
stretch değeri, kalan alanı kaplayacak şekilde esnek çizgileri uzatır (bu varsayılandır).
1 2 3 4 5 6 7 8 | .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: stretch; } |
center değer ekranları, kapsayıcının ortasındaki esnek çizgileri görüntüler.
1 2 3 4 5 6 7 8 | .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: center; } |
flex-start değeri, kapsayıcının başlangıcındaki esnek çizgileri görüntüler,
1 2 3 4 5 6 7 8 | .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-start; } |
flex-end değeri, kapsayıcının sonundaki flex çizgilerini görüntüler.
1 2 3 4 5 6 7 8 | .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-end; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <style> body{ display: flex; justify-content: center; align-items: center; height: 100vh; } .kutu{ width: 200px; height: 200px; font-size: 30px; line-height: 200px; text-align: center; background-color: #0984e3; color:#fff; } </style> </head> <body> <div class="kutu">Merhaba</div> </body> </html> |
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.
1 2 3 4 5 6 7 8 | <div class="flex-container"> <div style="order: 3">A</div> <div style="order: 2">B</div> <div style="order: 4">C</div> <div style="order: 1">D</div> </div> |
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.
1 2 3 4 5 6 7 | <div class="flex-container"> <div style="flex-grow: 4">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 5">3</div> </div> |
flex-shrink özelliği
flex-shrink özelliği, bir flex öğesinin kalan flex öğelere göre ne kadar küçüleceğini belirtir.
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="flex-container"> <div>A</div> <div>B</div> <div style="flex-shrink: 0">C</div> <div>D</div> <div>A</div> <div>A</div> <div>A</div> <div>A</div> </div> |
1 2 3 4 5 6 7 8 9 10 11 | <div class="flex-container"> <div>A</div> <div>B</div> <div style="flex-shrink: 8">C</div> <div>Ç</div> <div>D</div> <div>E</div> <div>F</div> </div> |
flex-basis özelliği
flex-basis özelliği, bir flex öğesinin başlangıç uzunluğunu belirtir.
1 2 3 4 5 6 7 8 | <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div> </div> |
flex özelliği
flex özelliği, flex-grow, flex-shrink ve flex-basis özellikleri için kısa bir özelliktir.
1 2 3 4 5 6 7 8 | <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div> |
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.
1 2 3 4 5 | .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } |
Üçüncü flex öğeyi kapsayıcının ortasına hizalar.
1 2 3 4 5 6 7 | .flex-container{ display: flex; height: 400px; background-color: #00b894; } |
1 2 3 4 5 6 7 8 | <div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div> |
İkinci esnek öğeyi kapsayıcının üst kısmına ve üçüncü esnek öğeyi kapsayıcının alt kısmına hizalar.
1 2 3 4 5 6 7 | .flex-container{ display: flex; height: 400px; background-color: #00b894; } |
1 2 3 4 5 6 7 8 | <div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div> |
Kaynak
https://www.w3schools.com/css/css3_flexbox_container.asp
2 Yorum