- Katılım
- 6 Kas 2021
- Mesajlar
- 3,276
- Tepkime puanı
- 4,783
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
Responsive Tasarım İçin CSS Flexbox Kapsamlı Rehberi
Flexbox (Flexible Box Layout), modern web geliştirmede responsive tasarımlar oluşturmak için en güçlü CSS araçlarından biridir. Bu rehberde, Flexbox'ın tüm özelliklerini detaylı örneklerle anlatacağım.Flexbox Nedir?
Flexbox, öğeleri tek boyutlu (yatay veya dikey) olarak esnek bir şekilde düzenlemek için tasarlanmış bir CSS düzen modelidir. Temel avantajları:- Kolay hizalama ve dağıtım
- Dinamik boyutlandırma
- Sıralama kontrolü
- Responsive tasarım kolaylığı
Flexbox Temel Yapısı
Flexbox iki ana bileşenden oluşur:- Flex Container (display: flex uygulanan element)
- Flex Items (Container içindeki direkt çocuk elementler)
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; /* Flex container tanımı */
border: 2px solid #333;
padding: 10px;
background-color: #f4f4f4;
}
.flex-item {
padding: 20px;
background-color: #4361ee;
color: white;
margin: 5px;
font-size: 1.5rem;
}Flex Container Özellikleri
1. flex-direction (Esnek Yön)
Öğelerin yerleşim yönünü belirler:
CSS:
.flex-container {
flex-direction: row; /* Varsayılan (yatay) */
flex-direction: row-reverse; /* Yatay ters */
flex-direction: column; /* Dikey */
flex-direction: column-reverse; /* Dikey ters */
}2. flex-wrap (Sarma Davranışı)
Öğelerin sığmadığında nasıl davranacağını belirler:
CSS:
.flex-container {
flex-wrap: nowrap; /* Varsayılan (sığdırmaya çalışır) */
flex-wrap: wrap; /* Alt satıra kaydırır */
flex-wrap: wrap-reverse; /* Üst satıra kaydırır */
}3. justify-content (Ana Eksen Hizalama)
Ana eksendeki (flex-direction yönü) hizalamayı kontrol eder:
CSS:
.flex-container {
justify-content: flex-start; /* Varsayılan (başta) */
justify-content: flex-end; /* Sonda */
justify-content: center; /* Ortada */
justify-content: space-between; /* Eşit aralık (uçlarda boşluk yok) */
justify-content: space-around; /* Eşit aralık (uçlarda yarım boşluk) */
justify-content: space-evenly; /* Tam eşit aralık */
}4. align-items (Çapraz Eksen Hizalama)
Çapraz eksendeki (flex-direction'a dik yön) hizalamayı kontrol eder:
CSS:
.flex-container {
align-items: stretch; /* Varsayılan (uzatır) */
align-items: flex-start; /* Üstte */
align-items: flex-end; /* Altta */
align-items: center; /* Ortada */
align-items: baseline; /* Metin taban çizgisine göre */
}5. align-content (Çok Satırlı Hizalama)
Çok satırlı flex container'larda satırlar arası hizalamayı kontrol eder:
CSS:
.flex-container {
align-content: stretch; /* Varsayılan */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
}6. gap, row-gap, column-gap (Boşluklar)
Öğeler arası boşlukları ayarlar:
CSS:
.flex-container {
gap: 10px; /* Hem yatay hem dikey boşluk */
row-gap: 15px; /* Dikey boşluk */
column-gap: 20px; /* Yatay boşluk */
}Flex Item Özellikleri
1. order (Sıralama)
Öğelerin görüntülenme sırasını değiştirir:
CSS:
.flex-item:nth-child(1) {
order: 3; /* 3. sırada göster */
}
.flex-item:nth-child(2) {
order: 1; /* 1. sırada göster */
}
.flex-item:nth-child(3) {
order: 2; /* 2. sırada göster */
}2. flex-grow (Büyüme Faktörü)
Kullanılabilir alanda öğenin ne kadar büyüyeceğini belirler:
CSS:
.flex-item:nth-child(1) {
flex-grow: 1; /* Diğerlerine göre 1 kat büyür */
}
.flex-item:nth-child(2) {
flex-grow: 2; /* Diğerlerine göre 2 kat büyür */
}3. flex-shrink (Küçülme Faktörü)
Alan daraldığında öğenin ne kadar küçüleceğini belirler:
CSS:
.flex-item:nth-child(1) {
flex-shrink: 1; /* Varsayılan */
}
.flex-item:nth-child(2) {
flex-shrink: 0; /* Küçülmez */
}4. flex-basis (Temel Boyut)
Öğenin başlangıç boyutunu belirler:
CSS:
.flex-item {
flex-basis: 100px; /* Minimum 100px genişlik */
/* flex-basis: auto; Varsayılan (içerik boyutu) */
/* flex-basis: 20%; Container'ın %20'si */
}5. flex Kısayolu
flex-grow, flex-shrink ve flex-basis için kısayol:
CSS:
.flex-item {
flex: 1 0 200px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 200px */
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}6. align-self (Bireysel Hizalama)
Tek bir öğeyi çapraz eksende hizalar:
CSS:
.flex-item:nth-child(2) {
align-self: flex-end; /* Sadece bu öğe altta */
}Responsive Flexbox Örnekleri
1. Responsive Navigation Bar
HTML:
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
<div class="menu-toggle">☰</div>
</nav>
CSS:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #333;
color: white;
}
.nav-links {
display: flex;
list-style: none;
gap: 1.5rem;
}
.nav-links a {
color: white;
text-decoration: none;
}
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
width: 100%;
position: absolute;
top: 60px;
left: 0;
background-color: #333;
padding: 1rem;
}
.nav-links.active {
display: flex;
}
.menu-toggle {
display: block;
}
}2. Responsive Kart Grid'i
HTML:
<div class="card-container">
<div class="card">
<h3>Kart Başlık 1</h3>
<p>Kart içeriği buraya gelecek...</p>
</div>
<div class="card">
<h3>Kart Başlık 2</h3>
<p>Kart içeriği buraya gelecek...</p>
</div>
<div class="card">
<h3>Kart Başlık 3</h3>
<p>Kart içeriği buraya gelecek...</p>
</div>
</div>
CSS:
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.card {
flex: 1 1 300px; /* Minimum 300px, eşit büyüme */
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;
}
@media (max-width: 768px) {
.card {
flex: 1 1 100%; /* Mobilde tam genişlik */
}
}3. Responsive Form Düzeni
HTML:
<form class="flex-form">
<div class="form-group">
<label for="name">Adınız:</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="email">E-posta:</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="message">Mesajınız:</label>
<textarea id="message" rows="4"></textarea>
</div>
<button type="submit">Gönder</button>
</form>
CSS:
.flex-form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
@media (min-width: 600px) {
.form-group {
flex-direction: row;
align-items: center;
}
.form-group label {
flex: 0 0 150px; /* Sabit genişlik */
text-align: right;
}
.form-group input,
.form-group textarea {
flex: 1;
}
}Flexbox ile Sık Yapılan Hatalar ve Çözümleri
- Yanlış Container Tanımı:
- Hata: Flex özelliklerinin çalışmaması
- Çözüm: display: flex unutmayın
- Flex Item Olmayan Çocuklar:
- Hata: Torun elementlere flex özellikleri uygulamaya çalışmak
- Çözüm: Flex özellikleri sadece direkt çocuklara uygulanır
- Yükseklik Sorunları:
- Hata: Container'ın yüksekliği olmadan align-items çalışmaz
- Çözüm: Container'a sabit yükseklik verin veya min-height kullanın
- Margin Collapse:
- Hata: Flex item'ler arasında beklenmeyen boşluklar
- Çözüm: gap özelliği kullanın, margin yerine
- İçerik Taşması:
- Hata: İçerik flex item'den taşıyor
- Çözüm: min-width: 0 ekleyin veya overflow kullanın
Flexbox ve Grid Karşılaştırması
| Özellik | Flexbox | CSS Grid |
|---|---|---|
| Boyutlandırma | Tek boyutlu (satır veya sütun) | İki boyutlu (satır ve sütun) |
| Kullanım Amacı | Küçük ölçekli düzenler | Büyük ölçekli karmaşık düzenler |
| Hizalama | Daha güçlü hizalama özellikleri | Basit hizalama |
| Sıralama | order özelliği ile kolay | Daha sınırlı |
| Responsive | Doğal olarak responsive | Media query'lerle responsive |
Flexbox Kullanım İpuçları
- Mobile-First Yaklaşım: Basit dikey düzenle başlayıp, ekran büyüdükçe karmaşıklaştırın
- flex: 1 Sihri: Eşit dağılım için mükemmel bir kısayol
- Margin Yerine gap: Öğeler arası boşluk için daha temiz çözüm
- flex-wrap ile Responsive: Dar ekranlarda otomatik kaydırma
- Varsayılan Değerleri Bilin: flex-direction: row, flex-wrap: nowrap gibi
Flexbox ile Modern Layout Örnekleri
1. Holy Grail Layout (Ünlü 3 Bölümlü Düzen)
HTML:
<div class="holy-grail">
<header>Header</header>
<div class="content">
<main>Main Content</main>
<nav>Navigation</nav>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</div>
CSS:
.holy-grail {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
flex: 1;
}
main {
flex: 1;
padding: 1rem;
background: #f4f4f4;
}
nav {
order: -1;
flex: 0 0 200px;
background: #ddd;
padding: 1rem;
}
aside {
flex: 0 0 250px;
background: #ddd;
padding: 1rem;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
}
nav, aside {
flex: 0 0 auto;
}
}2. Sticky Footer (Yapışkan Altlık)
HTML:
<div class="page">
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</div>
CSS:
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
background: #333;
color: white;
padding: 1rem;
text-align: center;
}3. Media Object (Medya Bileşeni)
HTML:
<div class="media">
<img src="avatar.jpg" alt="Profil" class="media-img">
<div class="media-body">
<h3>Kullanıcı Adı</h3>
<p>Bu bir medya nesnesi örneğidir. Flexbox ile kolayca oluşturulabilir.</p>
</div>
</div>
CSS:
.media {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1rem;
background: #f9f9f9;
padding: 1rem;
border-radius: 4px;
}
.media-img {
flex: 0 0 60px;
border-radius: 50%;
}
.media-body {
flex: 1;
}