📌 CSS FLEXBOX TEMELLERİ VE İLERİ KULLANIM

1️⃣ Flexbox Nedir?

Flexbox, CSS’in düzgün ve esnek kutu modeli yaklaşımıdır.

• Ana amaç: Elemanları satır veya sütun üzerinde hizalamak, boyutlandırmak ve boşlukları kontrol etmek.
• Flexbox, container (kapsayıcı) – item (öğe) mantığı ile çalışır.

2️⃣ Temel Container Özellikleri

display: flex

.container {
  display: flex; /* Flex konteyner yapar */
}

flex-direction

Ana ekseni belirler (yatay veya dikey).

.container {
  flex-direction: column;
}

flex-wrap

Öğelerin tek satırda mı kalacağını belirler.

.container {
  flex-wrap: wrap; /* Çok satırlı esnek düzen */
}

3️⃣ Ana Eksende Hizalama (justify-content)

• Ana eksen = flex-direction doğrultusu

  | Değer | Açıklama |

  |-------|----------|

  | flex-start | Başlangıca hizala |

  | flex-end | Sona hizala |

  | center | Ortala |

  | space-between | Öğeler arası eşit boşluk, kenarlara boşluk yok |

  | space-around | Öğeler arası eşit boşluk, kenarlara yarısı kadar boşluk |

  | space-evenly | Öğeler ve kenarlara eşit boşluk |