Flexbox ile tek yönlü düzenler, hizalama ve responsive tasarım.
Flexbox, elementleri yatay veya dikey eksende hizalamak için tasarlanmıştır. Navbar, kart satırı, buton grubu gibi bileşenler için idealdir.
flex-direction: row'da ana eksen yataydır. justify-content ana ekseni, align-items çapraz ekseni kontrol eder.
flex: 1 kısaltması flex-grow: 1, flex-shrink: 1, flex-basis: 0 demektir. Kalan boşluğu eşit paylaşır.
Kapsayıcı (container) özellikleri */
.flex-kapsayici {
display: flex;
/* Yön */
flex-direction: row; /* → sol'dan sağa (varsayılan) */
flex-direction: row-reverse; /* ← sağdan sola */
flex-direction: column; /* ↓ yukarıdan aşağıya */
flex-direction: column-reverse; /* ↑ aşağıdan yukarıya */
/* Ana eksen hizalama (yatay) */
justify-content: flex-start; /* sola yasla */
justify-content: flex-end; /* sağa yasla */
justify-content: center; /* ortala */
justify-content: space-between; /* aralarına boşluk */
justify-content: space-around; /* etrafına boşluk */
justify-content: space-evenly; /* eşit boşluk */
/* Çapraz eksen hizalama (dikey) */
align-items: stretch; /* uzat (varsayılan) */
align-items: flex-start; /* üste yasla */
align-items: flex-end; /* alta yasla */
align-items: center; /* ortala */
align-items: baseline; /* metin tabanına hizala */
/* Satır kırma */
flex-wrap: nowrap; /* tek satır (varsayılan) */
flex-wrap: wrap; /* satır kır */
/* Boşluk */
gap: 16px;
row-gap: 16px;
column-gap: 24px;
}
/* Çocuk (item) özellikleri */
.flex-item {
flex-grow: 1; /* boş alanı büyüyerek doldur */
flex-shrink: 0; /* küçülme! */
flex-basis: 200px; /* temel boyut */
flex: 1; /* kısaltma: 1 1 0 */
align-self: center; /* sadece bu elementin dikey hizası */
order: -1; /* sıra değiştir */
}
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; padding: 20px; }
/* 1. Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #1e293b;
padding: 0 24px;
height: 60px;
color: white;
border-radius: 10px;
margin-bottom: 20px;
}
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; }
/* 2. Kart Grid */
.kart-grid {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.kart {
flex: 1;
min-width: 200px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 20px;
}
/* 3. Ortalanmış içerik */
.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 150px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border-radius: 10px;
gap: 12px;
}
.hero h2 { font-size: 22px; }
.hero p { opacity: 0.85; font-size: 14px; }
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<strong></> Furkan Bacanlı</strong>
<ul class="nav-links">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Dersler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<!-- Kartlar -->
<div class="kart-grid">
<div class="kart"><h3>PHP</h3><p>Backend geliştirme</p></div>
<div class="kart"><h3>CSS</h3><p>Stil ve animasyon</p></div>
<div class="kart"><h3>JS</h3><p>Dinamik içerik</p></div>
</div>
<!-- Hero -->
<div class="hero">
<h2>Flexbox ile Tasarım</h2>
<p>justify-content ve align-items ile tam ortala</p>
</div>
</body>
</html>