CSS Academy · Ders

Flex Wrap ve Align-Content

Flex öğelerinin birden çok satıra taşınmasına izin verin ve taşınan satırları align-content ile hizalayın.

Flex Wrap ve Align-Content, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

flex-wrap: nowrap (Varsayılan)

Varsayılan olarak flex öğeleri alt satıra geçmez. Öğeler kapsayıcı genişliğini aşarsa yeni bir satıra geçmek yerine küçülür veya taşar.

flex-wrap: wrap

flex-wrap: wrap ile ana ekseni aşan öğeler yeni bir satıra (column yönünde yeni bir sütuna) geçer. Her sarma satırı ayrı bir mini flex kapsayıcısı gibi davranır.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse, öğeleri çapraz eksenin ters yönünde sarar: yeni satırlar (row yönünde) aşağıda değil yukarıda görünür.

Kartları Sarmalama Deseni

Görünüm alanı daraldıkça kartların sonraki satıra geçtiği klasik duyarlı kart düzeni:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

Çok Satırlı Düzen için align-content

align-content, çapraz eksende sarmalanmış satırlar arasındaki boşluğu denetler. Yalnızca bir satır olduğunda etkisi yoktur. Değerleri justify-content değerlerini yansıtır.

align-content Değerleri

Kullanılabilir değerler:

flex-start — satırları çapraz eksenin başlangıcına doğru toplar
flex-end — satırları çapraz eksenin sonuna doğru toplar
center — satırları ortalar
space-between — satırlar arasında eşit boşluk bırakır
space-around — satırların çevresinde eşit boşluk bırakır
stretch — satırlar alanı dolduracak şekilde genişler (varsayılan)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items ve align-content Karşılaştırması

Fark:

align-items — her flex satırındaki öğeleri hizalar
align-content — flex satırlarının kendisini kapsayıcı içinde hizalar

Flex'te gap

Daha önce grid-gap olan gap özelliği, kenar boşlukları kullanmadan flex öğeleri arasında tutarlı boşluk ekler. Hem satır hem de sütun boşlukları için çalışır.

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Medya Sorguları Olmadan Duyarlı Sarmalama

Sabit bir ideal boyut kullanarak sığdığı kadar çok sütuna otomatik olarak sarın. Medya sorgularına gerek yoktur:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

flex-flow Kısa Yazımı

flex-flow, flex-direction ve flex-wrap özelliklerini tek bir bildirimde birleştirir:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Sarmalama ve Izgara Karşılaştırması

Belirli satır ve sütunlara sahip karmaşık iki boyutlu düzenler için CSS Grid daha uygundur. Flexbox sarmalama, birden çok satıra akabilen tek boyutlu içerikler için en iyi seçenektir.

Hızlı Kontrol

Bir flex kapsayıcısında birden çok satır olduğunda, sarmalanan satırların kendisini hangi özellik hizalar?

Özet

flex-wrap: wrap, öğelerin yeni satırlara akmasını sağlar. align-content, çok satırlı bir kapsayıcıda bu satırlar arasındaki boşluğu denetler. Tutarlı boşluk için gap kullanın. Medya sorguları olmadan duyarlı kart ızgaraları oluşturmak için flex: 1 1 250px ile flex-wrap değerlerini birleştirin.

Sıkça Sorulan Sorular

“Flex Wrap ve Align-Content” dersi ücretsiz mi?

Evet — “Flex Wrap ve Align-Content” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Flex Wrap ve Align-Content” dersinde ne öğreneceğim?

Flex öğelerinin birden çok satıra taşınmasına izin verin ve taşınan satırları align-content ile hizalayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Flex Wrap ve Align-Content” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön