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

Sayfada öğeleri düzenlemek için flexbox nasıl kullanılır?

sobes.tech yapay zeka

AI'dan gelen yanıt

Flexbox (veya Esnek Kutu Düzeni) CSS modülü, bir kapsayıcı içindeki öğelerin esnek düzenlerini oluşturmak için tasarlanmış olup, alanı kolayca dağıtmayı ve öğeleri hizalamayı sağlar, hatta boyutları bilinmiyor veya dinamik olarak değişiyorsa bile.

Flexbox'un temel kavramı, flex kapsayıcı ve onun flex öğeleridir.

Flex kapsayıcı için özellikler (display: flex;):

  • flex-direction: Flex öğelerinin kapsayıcı içinde yerleştirilme yönünü belirler (ana eksen).

    • row (varsayılan): yatay, soldan sağa.
    • row-reverse: yatay, sağdan sola.
    • column: dikey, yukarıdan aşağı.
    • column-reverse: dikey, aşağıdan yukarı.

  • flex-wrap: Flex öğelerinin, sığmadıkları takdirde yeni satıra (veya satırlara) geçip geçmeyeceğini belirler.

    • nowrap (varsayılan): tüm öğeler tek satırda.
    • wrap: yeni satırlara geçer.
    • wrap-reverse: ters sırayla yeni satırlara geçer.

  • justify-content: Ana eksen boyunca flex öğelerini hizalar.

    • flex-start (varsayılan): ana eksenin başlangıcında.
    • flex-end: ana eksenin sonunda.
    • center: ortada.
    • space-between: öğeler arasında eşit boşluk.
    • space-around: öğelerin etrafında eşit boşluk.
    • space-evenly: öğeler arasında ve etrafında eşit boşluk.

  • align-items: Çapraz eksen boyunca (ana eksene dik) flex öğelerini hizalar.

    • stretch (varsayılan, öğelerin yüksekliği/genişliği belirlenmediyse): öğeleri çapraz eksende gerer.
    • flex-start: çapraz eksenin başlangıcı.
    • flex-end: çapraz eksenin sonu.
    • center: ortada.
    • baseline: metin taban çizgisine göre hizalama.

  • align-content: Çok satırlı flex konteynerlerde satırları çapraz eksende hizalar (flex-wrap: wrap kullanıldığında). justify-content'e benzer şekilde çalışır, ama satırlar için.

    • stretch (varsayılan): satırları gerer.
    • flex-start: satırlar başlangıçta.
    • flex-end: satırlar sonunda.
    • center: satırlar ortada.
    • space-between: satırlar arasında eşit boşluk.
    • space-around: satırların etrafında eşit boşluk.

  • gap, row-gap, column-gap: Flex öğeleri arasındaki boşlukları belirler.

.flex-container {
  display: flex; /* Flex kapsayıcı yapar */
  flex-direction: row; /* Öğeler yatay dizilir */
  flex-wrap: wrap; /* Öğeler yeni satıra geçer */
  justify-content: center; /* Öğeler ortalanır */
  align-items: center; /* Öğeler dikeyde ortalanır */
  gap: 10px; /* Öğeler arasında 10px boşluk */
}

Flex öğeleri için özellikler (flex kapsayıcısının doğrudan çocukları):

  • order: Öğenin kapsayıcı içindeki sırasını belirler (varsayılan 0). Daha küçük değerler önce gelir.

  • flex-grow: Öğenin kullanılabilir alana göre ne kadar büyüyebileceğini belirler. Varsayılan 0.

  • flex-shrink: Alan azaldığında ne kadar küçülebileceğini belirler. Varsayılan 1.

  • flex-basis: Öğenin temel boyutunu belirler, boş alan dağıtılmadan önce. px, %, rem, auto vb. olabilir. Varsayılan auto.

  • flex: flex-grow, flex-shrink, flex-basis için kısa yazımdır.

  • align-self: Öğenin çapraz eksende hizalamasını, kapsayıcıdaki align-items'i geçersiz kılar. Aynı değerleri alır.

.flex-item {
  order: 2; /* Bu öğe ikinci gösterilir */
  flex-grow: 1; /* Kalan alanı kaplar */
  flex-shrink: 0; /* Daralmaz */
  flex-basis: 100px; /* Temel boyut 100px */
  align-self: flex-start; /* Öğeyi çapraz eksende başlangıca hizala */
}

.another-item {
  flex: 1 1 auto; /* Kısa yazım: grow: 1, shrink: 1, basis: auto */
}

Flexbox, basit hizalamalardan daha karmaşık ve uyum sağlayan düzenlere kadar çeşitli düzenler oluşturmayı sağlar, alan dağılımını ve öğelerin hizalanmasını kapsayıcı içinde kontrol eder.

ÖncekiSonraki