CSS ile “Ortalama” Sorunu (Flexbox Rehberi)
CSS ile Elementleri Ortalama: Flexbox Kullanımı (Kesin Çözüm)
Web tasarımına yeni başlayanların veya hatta tecrübeli geliştiricilerin bile zaman zaman takıldığı en klasik sorunlardan biri şudur: “Bu kutuyu sayfanın tam ortasına nasıl hizalarım?”
Eskiden float, margin: 0 auto veya karmaşık pozisyonlama (absolute/relative) hesaplamalarıyla uğraşırdık. Artık CSS3 ile gelen Flexbox teknolojisi sayesinde, tek satırla hem yatayda hem dikeyde hizalama yapmak mümkün.
Bu yazıda, sitenizdeki herhangi bir resmi, yazıyı veya kutuyu ekranın tam ortasına (Horizontal & Vertical Center) nasıl getireceğinizi gösteriyorum.
3 Satır Kod ile Tam Ortalama
Ortalamak istediğiniz öğenin (çocuğun) içinde bulunduğu kapsayıcıya (anne elemente) aşağıdaki CSS kodlarını vermeniz yeterlidir:
|
1 2 3 4 5 6 |
.kapsayici-kutu { display: flex; /* Flexbox modelini açar */ justify-content: center; /* Yatayda (soldan sağa) ortalar */ align-items: center; /* Dikeyde (yukarıdan aşağıya) ortalar */ height: 100vh; /* Örnek: Ekran yüksekliği kadar yer kaplasın */ } |
Kodların Anlamları Nedir?
- display: flex; -> Tarayıcıya “Ben artık esnek kutu modelini kullanıyorum, içimdeki öğeleri buna göre yönet” der.
- justify-content: center; -> İçerikleri ana eksende (genellikle yatay) merkeze toplar. Diğer seçenekler:
flex-start(sola dayalı),flex-end(sağa dayalı),space-between(eşit aralıklı). - align-items: center; -> İçerikleri çapraz eksende (genellikle dikey) merkeze toplar.
Mobil Uyumlu (Responsive) Tasarım İçin İpucu
Flexbox, mobil cihazlarda öğelerin alt alta geçmesini sağlamak için de mükemmeldir. Eğer elementlerin mobilde yan yana değil de alt alta durmasını isterseniz şu kodu eklemeniz yeterlidir:
|
1 2 3 |
.kapsayici-kutu { flex-direction: column; /* Yan yana değil, alt alta dizil */ } |
Eski yöntemlerle vakit kaybetmeyin, Flexbox modern web tasarımın standardıdır.