- Katılım
- 19 Ocak 2024
- Mesajlar
- 159
- Tepkime puanı
- 10
- Puanları
- 18
- Ödüller
- 6
CSS Flexbox ile Yatay ve Dikey Hizalama
Flexbox, CSS ile öğeleri yatay ve dikey olarak hizalamanın en kolay yollarından biridir. Duyarlı (responsive) ve düzenli bir tasarım oluşturmak için flexbox özellikleri sıklıkla kullanılır. İşte temel ve ileri düzey flexbox teknikleri.
Temel Flexbox Yapısı
Bir öğeyi ortalamak için flexbox kullanabilirsiniz:
CSS:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.flex-item {
background-color: #007BFF;
color: white;
padding: 20px;
font-size: 18px;
border-radius: 5px;
}
HTML Yapısı:
HTML:
<div class="flex-container">
<div class="flex-item">Ortalanmış Öğeler</div>
</div>
Bu yapı, öğeyi hem yatay hem de dikey olarak sayfanın ortasına hizalar.
Flexbox ile Duyarlı Hizalama
Flexbox, öğeleri ekran boyutuna göre hizalamak için de kullanılabilir.
CSS:
.flex-responsive {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
padding: 20px;
}
.flex-responsive .item {
flex: 1 1 calc(33.333% - 20px);
background-color: #007BFF;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
@media (max-width: 768px) {
.flex-responsive .item {
flex: 1 1 calc(50% - 10px);
}
}
@media (max-width: 480px) {
.flex-responsive .item {
flex: 1 1 100%;
}
}
HTML Yapısı:
HTML:
<div class="flex-responsive">
<div class="item">Öğe 1</div>
<div class="item">Öğe 2</div>
<div class="item">Öğe 3</div>
<div class="item">Öğe 4</div>
<div class="item">Öğe 5</div>
</div>
Flexbox ile Sıralama Kontrolü
Flexbox özelliklerini kullanarak öğelerin sırasını değiştirebilirsiniz.
CSS:
.flex-order {
display: flex;
gap: 10px;
}
.flex-order .item {
background-color: #f4f4f4;
color: #333;
padding: 20px;
border: 1px solid #ddd;
text-align: center;
flex: 1;
}
.flex-order .item:nth-child(3) {
order: -1;
background-color: #007BFF;
color: white;
}
HTML Yapısı:
HTML:
<div class="flex-order">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3 (Öncelikli)</div>
<div class="item">4</div>
</div>
Daha Karmaşık Hizalamalar
Flexbox ile öğeleri farklı yönlerde hizalamak için `flex-direction` ve `align-items` özelliklerini kullanabilirsiniz:
CSS:
.flex-complex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100vh;
background-color: #f4f4f4;
padding: 20px;
}
.flex-complex .item {
background-color: #007BFF;
color: white;
padding: 10px 20px;
margin: 5px 0;
border-radius: 5px;
}
HTML Yapısı:
HTML:
<div class="flex-complex">
<div class="item">Öğe 1</div>
<div class="item">Öğe 2</div>
<div class="item">Öğe 3</div>
</div>
Kullanım Alanları
- Navigasyon menüleri
- Ürün kartları
- Duyarlı düzenler
- Basit düzenlemeler için hızlı hizalama