Flexbox ne için kullanılır?

Flexbox, CSS'te esnek ve uyumlu düzenler oluşturmak için kullanılır. İçerideki öğeleri kolayca hizalamaya ve dağıtmaya olanak tanır, otomatik olarak boyutlarını ve konumlarını kullanılabilir alana göre ayarlar.

Flexbox'un temel kavramları:

• Flex kapsayıcı: display: flex; veya display: inline-flex; uygulanmış öğe. Flex öğelerini içerir.
• Flex öğeleri: Flex kapsayıcısının doğrudan çocukları.

Flexbox, şu özellikleri kontrol etmeye olanak tanır:

• Öğelerin düzen yönü (flex-direction).
• Öğelerin bir sonraki satıra/kolona geçişi (flex-wrap).
• Ana eksen boyunca öğelerin hizalanması (justify-content).
• Çapraz eksen boyunca öğelerin hizalanması (align-items ve align-content).
• Öğelerin görüntüleme sırası (order).
• Öğeler arasındaki boş alanın dağılımı (flex-grow, flex-shrink, flex-basis).

Temel kullanım örneği:

.kapsayici {
  display: flex;
  justify-content: center; /* Yatayda ortala */
  align-items: center; /* Dikeyde ortala */
}

.nesne {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="kapsayici">
  <div class="nesne"></div>
  <div class="nesne"></div>
  <div class="nesne"></div>
</div>