linkedin github youtube instagram

 

Flexbox Nedir?

 

 

 

Flexbox css3 ile hayatımıza girmiş, tüm tarayıcılarda desteklenen bir css özelliğidir. Bize son derece kolay ve esnek yapılar oluşturmamıza imkan sağlar. Yatayda dikeyde ortalama gibi işlemleri çok rahat yapmamıza imkan sunan özellikler sunar. Float gibi geliştirilme amacıyla kullanma amacımızın çok farklı olduğu yapılara kullanmamıza gerek kalmadan çok güzel responsive siteler oluşturmamıza olanak sağlar.

 

Flexbox ikiye ayrılır.

 

  1. Container(kapsayıcı) için
  2. Item (nesne) için

 

Container (kapsayıcı) için flexbox

 

.container{
    display:flex
}

 

 

Elementlerimizi (div, p ...) bir flex kapsayıcısı içine koymamız gerekiyor. O yüzden öncelikle bir tane kapsayıcı oluşturmamız gerekiyor.

Bu kısım önemli : Bir container'ı flexbox yaptığımız zaman yön belirtmemiz gerekiyor. Burası çok basittir ve herşeyin temelidir. Buraya anladığımız an flexbox bitmiştir  smiley

 

 


 

 

 

Yönümüzü row yani x ekseni olarak tanımladık. Bu durumda ;

 

Main axis Cross Axis
X Y

 

 

 

 


 

 

 

Main axis Cross Axis
Y x

 

 

 


 

 

 

 

 

Main ve Cross axis'i anladığımıza göre hadi bir örnek yapalım.


 

Küçük bir örnek

Div normalde blok seviyesi elementtir bu yüzden bu kutuların alt alta sıralanması gerekir ama biz yönümüzü x ekseni olarak ayarladığımız için bu kutular yan yana sıralanacaktır.

 

 

Bu derste flexbox'a giriş yaptık. İkinci dersimizde Container properties'lere göz atacağız.

 

İkinci Ders 

Tüm dersler