Flexbox nedir?

Flexbox (Esnek Kutu Düzeni) CSS'nin, karmaşık ve uyumlu düzenler oluşturmak için tasarlanmış bir modülüdür. Konteyner içindeki öğelerin konumlandırmasını, hizalanmasını ve alan dağılımını yönetmesine olanak tanır, hatta boyutları bilinmeyen veya dinamik olsa bile.

Flexbox'un temel kavramları:

• Ana eksen (main axis): Öğelerin dizildiği eksen. Varsayılan olarak yataydır (soldan sağa).
• Çapraz eksen (cross axis): Ana eksene dik olan eksen. Varsayılan olarak dikeydir (üstten aşağıya).
• Konteyner (flex container): Flexbox özelliklerinin uygulandığı öğe (display: flex veya display: inline-flex).
• Öğeler (flex items): Konteynerin çocuk öğeleri.

Flex konteyneri için özellikler:

• display: flex veya inline-flex
• flex-direction: Ana eksenin yönünü belirler (row, row-reverse, column, column-reverse)
• flex-wrap: Öğelerin yeni satıra geçip geçmeyeceğini belirler (nowrap, wrap, wrap-reverse)
• justify-content: Öğeleri ana eksen boyunca hizalar (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Öğeleri çapraz eksende hizalar (flex-start, flex-end, center, baseline, stretch)
• align-content: Çok satırlı konteynerde satırları veya sütunları çapraz eksende hizalar (flex-start, flex-end, center, space-between, space-around, stretch)

Flex öğeleri için özellikler:

• order: Öğenin konteyner içindeki sırasını belirler
• flex-grow: Öğenin kullanılabilir alanı ne kadar büyüyeceğini belirler
• flex-shrink: Alan yetersizse öğenin ne kadar küçüleceğini belirler
• flex-basis: Alan dağılımından önce öğenin başlangıç boyutunu belirler
• flex: flex-grow, flex-shrink ve flex-basis için kısa yazım
• align-self: Öğenin çapraz eksende hizalamasını yeniden tanımlar (flex-start, flex-end, center, baseline, stretch, auto)

Kullanım örneği:

/* Konteyner */
.container {
  display: flex; /* Flexbox'ı etkinleştir */
  flex-direction: row; /* Satır düzeni */
  justify-content: center; /* Yatayda ortala */
  align-items: center; /* Dikeyde ortala */
  height: 200px; /* Konteyner yüksekliği */
  border: 1px solid black;
}

/* Öğeler */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox, geleneksel yöntemlere göre (float, inline-block, table) uyumlu düzenler oluşturmayı büyük ölçüde kolaylaştırır.