Merhaba..
CSS ile gelen yeniliklerden bir olan FLEX yapıda , flex kapsayıcı ve flex eleman kavramlarından daha önce bahsetmiştik. Bu yazıda Flex Box için kullanılan özellikleri inceleyeceğiz...
FLEX BOX (KAPSAYICI) ÖZELLİKLERİ
Flex kapsayıcılar FLEX özelliği verilmiş elemanlardır. CSS tüm elemanları bir kutu gibi gördüğünden, tüm elemanlara uygulanabilir. Bir elemanın flex kapsayıcı olabilmesi için DISPLAY özelliğine FLEX değerinin verilmesi gerekir.
GENEL CSS TANIMI
.container { display : flex }
Flez kapsayıcılara, içindeki elemanların yerleşimleri ile ilgil bir çok özellik uygulanabilmektedir.
- GAP : Elemanlara arasındaki boşluk
- FLEX-DIRECTION : Elemanların yerleşim yönü
- FLEX-WRAP : Elemanların satır taşmaları
- FLEX-FLOW : DIRECTION ve WRAP kısa kullanımı
- JUSTIFY-CONTENT : Elamanlrın yatayda hizalanması
- ALIGN-ITEMS : Tek satır Elemanların dikeyde hizalanması
- ALIGN-CONTENT: Bşrden fazla satırdan oluşan Elemanların dikeyde hizalanması
Özellikleri incelemeden önce, herhangi bir flex özellik eklenmediğinde oluşan yerleşimi inceleyelim...
VARSAYILAN YERLEŞİM
Bir elemana FLEX yapı uygulandığında , içindeki tüm elemanlar blok bile olsalar , yanyana sıralanırlar. Bu daha sonra flex-direction özelliği ile değiştirilebilir.
Örneğin SECTION (kapsayıcı eleman) etiketi içerisinde 4 farklı renkte DIV olsun...
CSS
section{ display:flex; }
div { width:100px; height:100px;}
div:nth-child(1) { background-color:orange; }
div:nth-child(2) { background-color:skyblue; }
div:nth-child(3) { background-color:pink; }
div:nth-child(4) { background-color:yellow; }
HTML
<section>
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
</section>
EKRAN
Normalde alt alta yerleşmesi gereken divler, kapsayıcı SECTION etiketinin FLEX yapıda olmasından dolayı yanyana sıralanırlar..
GAP
Flex kapsayıcı içindeki elemanların arasında bırakılacak boşluğu belirler.. Elemanlar yatayda sıralı ise , aralarındaki yatay boşluğu , dikeyde alt alta sıralı ise aralarındaki dikey boşluğu belirler. GAP özelliğinin kapsayıcı elemana verilmesi gerekir..
CSS
section {
display:flex;
gap:20px; /* divler arasında 20px boşluk bırakılır..*/
}
EKRAN
FLEX-DIRECTION
FLex kapsayıcı içindeki elemanların yerleşim yönünü ayarlar. Flexyapı uygulanmış bir kapsaycıı içindeki elemanlar varsayılan yön olarak yanyana sıralanırlar. Ancak aşağıdaki değerler ile bu değiştirilebilir..
- row - Flex elemanlar , satır şeklinde yanyana sıralanırlar..
- column - Flex elemanlar , sütun şeklinde altalta sıralanırlar..
- row-reverse - Flex elemanlar , satır şeklinde ancak tersten yanyana sıralanırlar..
- column-reverse - Flex elemanlar , sütun şeklinde ancak tersten altalta sıralanırlar..
CSS
section {
display:flex;
gap:20px; /* divler arasında 20px boşluk bırakılır..*/
flex-direction: row; /* yanyana (yatay) sıralama (varsayılan) */
flex-direction: row-reverse; /* yanyana tersten sıralama */
flex-direction: column; /* altalta (dikey) sıralama */
flex-direction: column-reverse; /* dikey tersten sıralama */
}

FLEX-WRAP
FLex kapsayıcı içindeki elemanlar kapsayıcı genişliğini aştığında, alt satıra geçip geçmeyeceğini (WRAP) belirler.. Bu işlem WRAP olarak isimlendirilir. Özelliğin uygulanabilmesi için , flex elemanların kapsaycıı genişliğinden taşacak duruma gelmesi gerekir. Aşağıdaki özeliikleri alır:
- nowrap : Flex elemanlar , alt satıra geçmez ve genişlikleri daraltılarak kapsayıcı genişliğine uydurulur..
- wrap : Flex elemanlar , kapsayıcı genişliğiniğ aştğında, aşan elemanlar alt satıra atılır..
- wrap-reverse : Flex elemanlar , kapsayıcı genişliğiniğ aştğında, aşan elemanlar alt satıra atılır ama satır yerleşimi terslenir..
Daha iyi anlamak için Flex eleman sayısını arttıralım...
HTML
<section>
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 5 </div>
<div> 6 </div>
<div> 7 </div>
<div> 8 </div>
<div> 9 </div>
<div> 10 </div>
<div> 11 </div>
</section>
CSS
section {
display:flex;
gap:10px;
flex-wrap:wrap; /* taşan flex elemanlar alt satıra atılır */
flex-wrap:wrap-reverse; /* taşan flex elemanlar alt satıra atılır , satırlar tersten sıralanırlar */
flex-wrap:no-wrap; /* flex elemanlar ,genişlikleri daraltılarak, kapsayıcı genişliğine sığdırılır*/
}
div { width:100px; height:100px; background-color: orange; }
EKRAN
FLEX-WRAP : WRAP
FLEX-WRAP: WRAP-REVERSE
FLEX-WRAP: NO-WRAP
FLEX-FLOW
Flex-flow; flex-direction ve flex wrap özelliklerinin kısaltmasıdır. Aralarında boşluk bırakılarak tek satırda yazılabiir. Örneğin yerleşim yönü "row" (yatay) ve wrap özelliği "no-wrap" olan bir kapsayıcı için , bu iki özellik flex-flow ile belirtilebilir..
section {
display:flex;
gap:10px;
flex-flow: row no-wrap; /* flex-direction:row ve flex-wrap:no-wrap */
}
JUSTIFY-CONTENT
Kapsayıcı içindeki elemanları yatayda hizalamak için JUSTIFY-CONTENT özelliğini kullanıyoruz. Flex yapılarda varsayılan yön "row" yani yanyanadır. Justify-content bu durumda yatay hizalamada kullanılır. Ancak flex yapının yönü "column" yani yukarıdan aşağı yapılırsa , justify content bu kez dikeyde hizalama yapar. Aldığı değerler:
- flex-start
- center
- flex-end
- space-between
- space-around
- space-evenly
Yatay hizalama özellikleri ayrı ders olarak ele alınmıştır. Aşağıdaki linkten ulaşabilirsiniz...
FLEX ILE YATAY HİZALAMA (JUSTIFY-CONTENT
ALIGN-ITEMS ve ALIGN-CONTENT
Flex yapılarda, elemanların japsayıcı içerisindeki dikey hizalamaları , yerleşimin kaç satır olduğuna bağlı olarak, align-items ve align-content özellikleri iler belirlenir..
- ALIGN-ITEMS : tek atır içerikler için dikey hizalama..
- ALIGN-CONTENT : çok satırlı içerikler için dikey hizalama..
Dikey hizalama özellikleri ayrı ders olarak d ele alınmıştır. Aşağıdaki linkten ulaşabilirsiniz...
FLEX ILE DİKEY HİZALAMA (ALIGN-ITEMS)
Görüşmek üzere...