Nedir bu FlexBox

Merhaba, eğer buradaysanız yüksek ihtimalle Front End kodlamaya yeni başladınız veya sürecin başlarındasınız demektir.

Flex yapısı dışarıdan bakınca ne kadar karmaşık gibi görünsede, mantığını kavradığınız takdirde kolay gelmeye başlayacağına eminim diyebilirim.

Hemen hemen front end kodlamaya başlayan herkesin korkulu rüyası olan flexbox yapısına gelin hep beraber bakalım.

Flex yapısı bizlere CSS’in vermiş olduğu en büyük avantajlardan bir tanesidir. Flex yapısı sayesinde, web sayfalarımızda daha rahat bir şekilde düzenleme yapabiliyoruz.

Flex yapısını anlamak için önce parent ve child ilişkisini anlamak gerekiyor.

Bir elementin üzerinde, o elementi kapsayan elemente “parent” diyoruz. Hiçbir şey anlamadım diyorsanız şu örneğe bakalım.

<div class = "container">
  <span class ="child"> Child </span>
</div>

Yukarıdaki örnekte kapsayan eleman “container” , “span” elementinin parent’ı olarak görev alıyor. Span ise burada child yani çocuk görevinde.

Şimdi tekrar konumuza dönelim;

Elementleri yan yana almak için “flex” kullanıyoruz. Bu “flex” değerini ise ebeveyn yani kapsayıcıya vermemiz gerekiyor. Bir örnek ile tekrar inceleyelim

  <div class ="item-wrapper">
     <div class = "item"> İtem </div>
     <div class = "item"> İtem </div>
     <div class = "item"> İtem </div>
     <div class = "item"> İtem </div>
  </div>

Yukardaki örnekte bir “parent” içinde 4 adet item değeri var. Div bir block element olduğu için sayfada aşağıda olduğu gibi görünecektir.

Şimdi ise bunları flex ile yan yana alalım.

.item-wrapper{
display : flex;
}

Flex yapısını yukarda olduğu gibi verdiğimizde bize şu şekilde bir sonuç verecektir;

Elementler yan yana geldi ancak çok bitişik bir şekilde duruyor. Bunları birbirinden uzaklaştırmak içinse farklı özellikler kullanıyoruz. Gelin birlikte bu özelliklere bakalım.

Justify-content : space-between;

İlk özelliğimiz olan “Justify-content : space-between;” değerleri birbirinden parent genişliğince ayırmak için kullanılır. İlk ve son elementleri köşelere yaslar, diğer elementleri ise ortalar.

.item-wrapper{
display : flex;
justify-content: space-between;
}

Çıktımız yukarıda göründüğü gibi olacaktır.

Justify-content : space-around;

.item-wrapper{
display : flex;
justify-content: space-around;
}

İkinci özelliğiniz olan “justify-content: space-around;” ise elementleri kenarlara sıfırlamak yerine, kenarlardan boşluk bırakacaktır.

Çıktısı ise bu şekilde olacaktır.

Justify-content : space-evenly;

.item-wrapper{
display : flex;
justify-content: space-evenly;
}

Üçüncü özelliğimiz “Justify-content : space-evenly;” ise elementler arasında eşit boşluk bırakacaktır.

Çıktısı ise bu şekilde olacaktır.

Elementleri yönetmek için bu şekilde flex yapısını kullanıyoruz. Flex yapısı daha fazla özelliğe sahip ancak, onları da anlattığımız takdirde uzun bir yazı olacak.

Flex yapısını en güzel anlatan dokümantosyonun linkini buraya bırakıyorum. Bu link üzerinden detaylara göz atabilirsiniz.

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

Başka yazılarda görüşmek dileği ile…