Sobes.tech
Mülakat Yardımı
Kaynaklar
Mülakat Hazırlığı
Kaynaklar
İş Arama
Kaynaklar
Yasal
Sorulara geri dön
Junior

Flexbox nedir?

sobes.tech yapay zeka

AI'dan gelen yanıt

Flexbox (Esnek Kutu Düzeni) CSS'de tek boyutlu bir düzen modelidir ve konteyner içindeki öğeler arasında alan dağıtmak ve güçlü hizalama özellikleri sunmak için tasarlanmıştır. Çocuk öğelerin (flex öğeleri) boyutlarını, sırasını ve hizalamasını, ana konteyner (flex konteyner) içindeki konumlarına bakmaksızın kolayca yönetmeye olanak tanır.

Flexbox'un temel kavramları:

  • Flex konteyner: display: flex veya display: inline-flex ile belirlenmiş öğe. Bu konteynerde, doğrudan çocuk öğeleri için düzen kuralları tanımlanır.
  • Flex öğeleri: Flex konteynerinin doğrudan çocuk öğeleri. Bu öğelere, içlerindeki davranışlarını belirleyen Flexbox özellikleri uygulanır.
  • Ana eksen (main axis): Flex öğelerinin dizildiği eksen. Varsayılan olarak yataydır (soldan sağa), ancak flex-direction ile değiştirilebilir.
  • Çapraz eksen (cross axis): Ana eksene dik olan eksen.
  • Ana başlangıç (main start) / Ana son (main end): Ana eksen boyunca başlangıç ve bitiş.
  • Çapraz başlangıç (cross start) / Çapraz son (cross end): Çapraz eksen boyunca başlangıç ve bitiş.

Flexbox'un ana özellikleri:

  • display: Öğenin flex konteyner olduğunu belirler (flex veya inline-flex).
  • flex-direction: Ana eksenin yönünü belirler (row, row-reverse, column, column-reverse).
  • flex-wrap: Flex öğelerinin, alan yetersizse yeni satıra/kolona geçip geçmeyeceğini belirler (nowrap, wrap, wrap-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).
  • align-content: Flex satırlarını çapraz eksende hizalar (birden fazla satır varsa).

Flex öğeleri için temel özellikler:

  • order: Flex öğesinin görüntüleme sırasını belirler (varsayılan 0).
  • flex-grow: Flex öğesinin büyüme katsayısı, kullanılabilir alanı ne kadar doldurabileceğini belirler.
  • flex-shrink: Flex öğesinin küçülme katsayısı, taşmayı önlemek için ne kadar küçülebileceğini belirler.
  • flex-basis: Serbest alan dağıtılmadan önce flex öğesinin başlangıç boyutu.
  • flex: flex-grow, flex-shrink ve flex-basis için kısaltma.
  • align-self: Belirli bir flex öğesi için align-items'i geçersiz kılar.

Kullanım örneği:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Konteyneri flex yapar */
  justify-content: center; /* Ana eksende öğeleri ortalar */
  align-items: center; /* Çapraz eksende öğeleri ortalar */
  height: 200px; /* Gösterim amacıyla */
  border: 1px solid black;
}

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

Flexbox'un temel avantajları:

  • Öğeleri yatay ve dikey olarak kolayca hizalama.
  • Öğeler arasında alanın esnek dağılımı.
  • Öğelerin sırasını kolayca değiştirme.
  • Float ve pozisyon kullanmadan uyumlu tasarım.
  • Modern tarayıcılarda iyi destek.
ÖncekiSonraki