CSS Flexbox Nedir? (Örneklerle Basit Anlatım)

Flexbox (esnek kutu düzeni), öğeleri bir satır veya sütun boyunca kolayca hizalamak ve aralarındaki boşluğu dağıtmak için kullanılan modern bir CSS düzen sistemidir. Ortalama yapmak, öğeleri yan yana dizmek ve duyarlı (responsive) tasarım için en pratik yoldur.

1) Flex kabı oluştur

Bir öğeyi display:flex yaparsan, doğrudan içindeki çocuk öğeler otomatik olarak yan yana dizilir:

.kutu {
  display: flex;
}

2) Yatay hizalama: justify-content

.kutu {
  display: flex;
  justify-content: center;      /* ortala */
  /* space-between: uçlara yasla ve aralarına eşit boşluk */
}

3) Dikey hizalama: align-items

.kutu {
  display: flex;
  align-items: center;          /* dikeyde ortala */
  height: 200px;
}

4) Tam ortalama (yatay + dikey)

.kutu {
  display: flex;
  justify-content: center;
  align-items: center;
}

Bir öğeyi hem yatay hem dikey ortalamanın en kısa yolu budur. Yön değiştirmek için flex-direction: column kullanabilirsin. Bunu Kuzey Kutbu kod editöründe HTML/CSS seçip hemen deneyebilirsin.