CSS FLEX BOX (KAPSAYICI) ÖZELLİKLERİ

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...