Bir sitenin üst alanı birkaç öğeden oluşuyor gibi görünür: logo, menü ve bir işlem butonu. Ancak marka adı uzadığında, menüye yeni bağlantı eklendiğinde veya tarayıcıda metin büyütüldüğünde bu küçük alan kolayca sıkışabilir. Flexbox, öğelerin kullanılabilir alanı nasıl paylaşacağını tanımlamak için uygundur; doğru sonuç için içerik sınırlarını da düşünmek gerekir.
Bu yazıda örnek bir yazılım şirketinin header alanını tasarlayacağız. Dar görünümde bağlantıların alt satıra geçebildiği, JavaScript gerektirmeyen bir başlangıç düzeni kuracağız. Kodlar öğretici örnektir; çalışan bir tema üzerinde test edilmiş hazır eklenti değildir.
Flexbox’ın iki eksenini anlayın
MDN Flexbox rehberi, Flexbox’ı tek boyutlu bir yerleşim modeli olarak açıklar. Ana eksen, flex-direction ile belirlenir. Varsayılan row yönünde yatay yazı düzeni için ana eksen satır boyunca ilerler; çapraz eksen buna diktir.
justify-content ana eksendeki dağılımı, align-items çapraz eksendeki hizalamayı yönetir. Bu yüzden “dikey ortalama” diye ezberlenen bir kural, yönü column yaptığınızda farklı davranabilir. Önce hangi ekseni düzenlediğinizi belirlemek, rastgele özellik deneme ihtiyacını azaltır.
Anlamlı HTML ile başlayın
<header class="site-baslik">
<a class="marka" href="/">Örnek Yazılım</a>
<nav class="ana-menu" aria-label="Ana menü">
<a href="/hizmetler/">Hizmetler</a>
<a href="/projeler/">Projeler</a>
<a href="/blog/">Blog</a>
</nav>
<a class="teklif" href="/iletisim/">Teklif iste</a>
</header>Burada “Teklif iste” başka bir sayfaya götürdüğü için bağlantıdır. Aynı öğe bir pencere açacak olsaydı, işlevine uygun bir buton ve ek etkileşim tasarımı gerekirdi. Öğeleri yalnızca görünüşlerine göre seçmemek, klavye ve yardımcı teknoloji davranışını daha anlaşılır kılar.
Esneme ve satır atlamayı birlikte yönetin
.site-baslik {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
padding: 1rem;
}
.marka {
flex: 0 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
.ana-menu {
display: flex;
flex: 1 1 22rem;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
min-width: 0;
}
.ana-menu a,
.teklif {
overflow-wrap: anywhere;
}
.teklif {
flex: 0 1 auto;
max-width: 100%;
}Örnekte dış kapsayıcı ve menünün kendisi satır atlamaya izin verir. Menüye ayrılan 22rem katı bir genişlik değildir; başlangıç boyutu olarak ele alınır. Öğe alan bulduğunda büyüyebilir, ihtiyaç olduğunda küçülebilir veya yeni satıra yerleşebilir.
flex özelliğinin belgesi, kısa yazımın büyüme, küçülme ve başlangıç boyutunu birlikte belirlediğini açıklar. Örnekteki 1 1 22rem sırasıyla bu üç kararı ifade eder. Sadece width vermek ile aynı davranışı beklememek gerekir.
Logo neden bazen sıkışır?
Örnek şirketimizin kısa metin markası yerine geniş bir logo kullandığını düşünelim. Logonun görünmesi gereken asgari alanı tanımlamadan bütün öğelerin eşit biçimde daralmasına izin verirsek sonuç beklentimizi karşılamayabilir. Öte yandan logoya aşırı büyük ve değişmez bir genişlik vermek de küçük ekranı zorlayabilir.
Bu örnek için önce logonun gerçek en-boy oranını ve dosyanın içindeki boşlukları kontrol ederdik. Görselin kutusu doğru olsa bile dosyanın içinde fazla boşluk bulunması, markanın küçük görünmesine yol açabilir. Böyle bir durumda Flexbox değerlerini değiştirmek, asıl sorunu çözmeyebilir.
Ardından menüye ayrılan alanı ve buton metnini değerlendirirdik. Bütün öğelerin aynı satırda kalması gerçekten gerekli mi? İkinci satırda açılan bir menü kabul edilebilir mi? Bu sorular cevaplanmadan taşmayı yalnızca gizlemek, kullanıcıların bazı bağlantılara ulaşmasını zorlaştırabilir.
Görsel sıralamayı içerik sırasıyla karıştırmayın
order özelliği, Flex veya Grid öğelerinin görsel yerleşim sırasını etkiler; belgenin mantıksal sırasını aynı şekilde değiştirmez. Bu nedenle önemli bağlantıları CSS ile farklı bir yere taşırken klavye gezinmesi ve okuma sırası arasındaki ilişkiyi kontrol etmek gerekir.
Örnek header’ımızda HTML sırası zaten marka, menü ve teklif bağlantısıdır. Dar görünümde de bu sırayı korumak anlaşılır bir başlangıçtır. Sırf tasarım görselinde öyle duruyor diye butonu başka bir konuma çekmek yerine, kullanıcı hangi sırayla ilerleyecek sorusunu değerlendirebiliriz.
Hamburger menü ne zaman gerekir?
Bu örnek açılır menü içermez. Üç veya dört bağlantının satır atlaması bazı siteler için yeterlidir. Menü büyüdüğünde açılır bir düzen seçilebilir; o durumda açma ve kapama, odak yönetimi, açık durumun bildirilmesi ve klavyeyle kullanım ayrıca ele alınmalıdır.
Bir simge ekleyip bağlantıları gizlemek tamamlanmış bir mobil menü sayılmaz. Örnek şirketimizin menüsü büyürse önce içerik gruplarını sadeleştirip gereksiz bağlantıları azaltmayı denerdik. Etkileşim karmaşıklığını artırmadan önce bilgi mimarisini gözden geçirmek yararlı bir tasarım adımıdır.
Header’ı nasıl kontrol edebilirsiniz?
Marka adını iki kat uzatın, menüye bir bağlantı ekleyin ve butonu daha uzun bir ifadeyle değiştirin. Pencereyi yavaşça daraltarak öğelerin hangi anda satır değiştirdiğini gözlemleyin. Yalnızca yaygın telefon genişliklerinde bakmak, aradaki sorunlu bir ölçüyü gözden kaçırabilir.
Son olarak metni büyütün ve bütün bağlantılara klavyeyle ulaşın. Odak görünümünün kesilmediğini, başlığın içerik üzerine binmediğini ve yatay kaydırmanın gereksiz yere oluşmadığını doğrulayın. Header’ı gerçek içerik değişikliklerine dayanıklı kurmak, birkaç pikseli kusursuz hizalamaktan daha kalıcı bir sonuç verir.
