Yükleniyor...

CSS Duyarlı Flex

Flex Items her çocuğun boyutunu ayarladı. Duyarlı Flex sonraki soruyu sorar: viewport daraldığında bu flex satırı sarılsın mı, yığılsın mı yoksa yön mü değiştirsin? Birkaç sakin media-query kalıbı öğrenin — derin Responsive Design ve Media Queries modülleri sonra gelir.

Duyarlı flex araç seti

📊 Duyarlı flex bir bakışta

Araç	Günlük işi
`flex-wrap`	Satır çok dar olduğunda öğeleri yeni satıra taşır
`flex-direction`	Breakpoint’te `row` ↔ `column` çevirerek bölümleri yığar
Media query	Yeni flex kuralını yalnızca viewport eşleşince uygular
`flex-basis` / `min-width`	Kartların ne zaman sarıldığını veya yan yana kaldığını yönlendirir
`gap`	Satırlar sarılırken boşluğu dürüst tutar
Düzen için `order`’dan kaçının	Klavye ve ekran okuyucu için DOM sırasını koruyun

Okunabilir bir masaüstü (veya mobile-first) flex tabanından başlayın. Net bir breakpoint’te yalnızca değişmesi gerekeni değiştirin — wrap, yön veya basis — her özelliği birden değil.

flex-wrap — satırın nefes almasına izin verin

Kartlar geniş ekranda satırda kalmalı ve sonsuza kadar ezilmek yerine sarılmalıysa wrap’i açın ve her karta makul bir basis verin.

Wrapping card row

css

.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

Breakpoint’te yön çevirme

Klasik kalıp: geniş viewport’ta yan yana, dar olanlarda yığılmış sütun. Media query içinde flex-direction değiştirin — aynı HTML kalsın.

Stack on small screens

css

.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

Yeniden akış için basis ve min-width

Wrap’i flex-basis veya min-width ile eşleştirin ki öğeler ne zaman düşeceklerine karar versin. Bir boyut hiç temiz sarılmıyorsa breakpoint basis’i de sıfırlayabilir.

Basis at a breakpoint

css

.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

Dar viewport’lar başka bir düzen dili değildir — aynı flex araçları, farklı değerler. Yönü veya wrap’i değiştirin; ikinci bir HTML ağacı icat etmeyin.

Sakin bir duyarlı flex alışkanlığı

Önce birincil bir breakpoint. order ile yeniden dizmek yerine wrap ve yön çevirmeyi tercih edin. Kaynak sırasını makul tutun. Akışkan görselleri, karmaşık breakpoint sistemlerini ve tam Responsive teorisini sonraki derslere bırakın.

Named stack roles

css

.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css

.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

Kendiniz deneyin

flex-wrap: wrap ve flex: 1 1 14rem ile bir kart satırı kurun.
max-width: 40rem altında kabuğu flex-direction: column yapın.
Küçük bir breakpoint’te araç çubuğu eylemlerini flex-basis: 100% yapın.
Çipler ezilmek yerine sarılsın diye min-width ekleyin.
Duyarlı düzeni «düzeltmek» için order kullanmaya direnin.

Sık yapılan hatalar

Wrap veya yığmak yerine öğeleri sonsuza kadar yalnızca küçültmek
order’ı duyarlı düzen aracı gibi kullanıp sekme sırasını bozmak
flex-wrap’i unutup kartların neden hiç düşmediğini merak etmek
Her flex özelliğini tek dev media query’ye dökmek
Bu dersi tüm Responsive Design kursu sanmak

Özet

Duyarlı flex; wrap, yön ve basis’i genişliklere göre uyarlar
flex-wrap artı makul basis/min-width satırların yeniden akmasını sağlar
Media query dar ekranlarda yığmak için flex-direction çevirir
Sakin breakpoint tercih edin; düzen hileleri için order’dan kaçının
Daha derin Responsive ve Media Queries modülleri sonra gelir

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil