CSS'de flex ne işe yarar?

Flexbox, bir kapsayıcı içindeki öğelerin tek boyutlu düzenlenmesini oluşturmak için kullanılır. Hizalama, alan dağılımı ve öğelerin sırasını yönetmeye olanak tanır.

Temel kavramlar:

Flex Kapsayıcı: display: flex veya display: inline-flex atanmış ebeveyn öğe.
Flex Öğeleri: Flex Kapsayıcı'nın çocuk öğeleri.
Ana Eksen: Flex Kapsayıcı'nın ana ekseni. flex-direction özelliği ile belirlenir. Varsayılan yataydır (row).
Çapraz Eksen: Ana eksene dik olan eksen.

Flex Kapsayıcı için temel özellikler:

display: Öğenin flex kapsayıcı olduğunu belirler (flex veya inline-flex).
flex-direction: Ana eksenin yönünü belirler (row, row-reverse, column, column-reverse).
justify-content: Flex öğelerini ana eksen boyunca hizalar (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items: Flex öğelerini çapraz eksende hizalar (flex-start, flex-end, center, baseline, stretch).
flex-wrap: Alan yetersizse flex öğelerinin yeni satıra/kolona geçip geçmeyeceğini belirler (nowrap, wrap, wrap-reverse).

Flex Öğeleri için temel özellikler:

order: Flex öğesinin görsel sırasını belirler (varsayılan 0).
flex-grow: Flex öğesinin diğerlerine göre ne kadar büyüyebileceğini belirler (varsayılan 0).
flex-shrink: Flex öğesinin diğerlerine göre ne kadar küçülebileceğini belirler (varsayılan 1).
flex-basis: Serbest alan dağıtılmadan önce flex öğesinin başlangıç boyutunu belirler (varsayılan auto).
align-self: Belirli bir öğe için çapraz eksende hizalamayı yeniden tanımlar.

Kullanım örneği:

.container {
  display: flex;
  justify-content: center; /* Ana eksende ortalama */
  align-items: center; /* Çapraz eksende ortalama */
  height: 200px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Bu, öğeleri kolayca ortalamaya, uyarlanabilir ızgaralar oluşturmaya ve öğeler arasındaki alanı yönetmeye olanak tanır.