Web geliştirmede düzen oluşturmak, özellikle dinamik ve farklı ekran boyutlarına uyum sağlayabilen yapılar kurmak her zaman bir meydan okuma olmuştur. Eskiden float gibi özelliklerle uğraşırken yaşadığımız zorluklar, yerini modern ve esnek bir çözüme bıraktı: CSS Flexbox. Bu yazımızda, CSS Flexbox modülünün tüm inceliklerini, nasıl kullanıldığını ve gerçek dünya uygulamalarını detaylı bir şekilde inceleyeceğiz. Bu rehberin sonunda, flexbox’ın gücünü keşfedecek ve web tasarımlarınızda esnekliği kolayca uygulayabileceksiniz.
Flex Yapısı Nedir?
Flexbox, boyutları bilinmeyen veya dinamik olarak değişen alanları daha kolay yönetmek için W3C tarafından geliştirilmiş bir CSS düzenleme modülüdür. Geleneksel yöntemlerle öğeleri yatayda veya dikeyde hizalamak, özellikle de ortalamak karmaşık CSS hileleri gerektirirken, flex yapısı hem kapsayıcıya (container) hem de içindeki öğelere (items) inanılmaz bir esneklik getirir. Flexbox’ın en büyük avantajı, responsive tasarımlarda öğelerin yatay ve dikey hizalarını, kendi içlerindeki sıralamalarını ve boşluklarını zahmetsizce belirleyebilmemizdir. Bu sayede, tüm çözünürlüklerde ve cihazlarda tutarlı ve esnek bir kullanıcı deneyimi sunmak çok daha hızlı ve verimli hale gelir.
Flex, genel anlamda bir CSS özelliğinin adı değil, bir yapının adıdır. Dolayısıyla flex yapısı altında hem kapsayıcı hem de içindeki öğeler için birden fazla flex özelliği bulunmaktadır. Bu makalede hepsini derinlemesine inceleyeceğiz.
Kapsayıcı (Container) için Flex Özellikleri
Flex modülü, ana kapsayıcıya uygulanarak içindeki öğelerin davranışını kontrol etmenizi sağlar. İlk olarak kapsayıcı için hangi özelliklerin bulunduğuna ve nasıl kullanıldıklarına bir göz atalım.
display
Bu özellik, bir HTML öğesini flex kapsayıcısı olarak tanımlamanın ilk adımıdır. display: flex; veya display: inline-flex; kullanarak kapsayıcının esnek bir görünümde olduğunu belirtiriz. flex ile inline-flex arasındaki fark, block ile inline tanımları ile aynıdır; flex bir blok seviyesi flex kapsayıcısı oluştururken, inline-flex bir satır içi flex kapsayıcısı oluşturur.
.container {
display: flex; /* ya da inline-flex */
}flex-direction
Öğelerin ana eksen boyunca hangi yönde sıralanacağını belirler. Varsayılan olarak row (yatayda soldan sağa) değerine sahiptir.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}row(varsayılan): Soldan sağa doğru sıralar.row-reverse: Sağdan sola doğru sıralar.column: Yukarıdan aşağı doğru sıralar.column-reverse: Aşağıdan yukarı doğru sıralar.
Demo: https://codepen.io/tayfunerbilen/pen/yLBWONr
flex-wrap
Varsayılan olarak esnek öğeler tek bir satıra sığmaya çalışır. Bu özellik, öğelerin gerektiğinde birden fazla satıra yayılıp yayılmayacağını kontrol eder.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}nowrap(varsayılan): Tüm öğeleri tek bir satırda tutar, gerekirse taşmaya neden olur.wrap: Öğeler gerektiğinde birden fazla satırda yukarıdan aşağı doğru listelenir.wrap-reverse: Öğeler gerektiğinde birden fazla satırda aşağıdan yukarı doğru listelenir.
Demo: https://codepen.io/tayfunerbilen/pen/zYOQBWR
flex-flow
Bu özellik, flex-direction ve flex-wrap özelliklerinin kısayoludur. Her ikisini tek bir özellikte tanımlayarak kullanabilirsiniz.
.container {
flex-flow: column wrap;
}justify-content
Öğelerin ana eksen (genellikle yatay) boyunca nasıl hizalanacağını belirler. Boşlukların dağılımı ve öğelerin konumlandırılması için kullanılır.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}flex-start(varsayılan): Öğeleri başlangıç noktasında (sola dayalı) hizalar.flex-end: Öğeleri bitiş noktasında (sağa dayalı) hizalar.center: Öğeleri ortada hizalar.space-between: İlk öğe sola, son öğe sağa dayalı, aradaki boşluklar eşit dağıtılır.space-around: Öğelerin etrafına eşit boşluklar ekler.space-evenly: Tüm öğeler ve kenarlar arasındaki boşlukları eşit dağıtır.
Demo: https://codepen.io/tayfunerbilen/pen/qBWGNgL
align-items
Öğelerin çapraz eksen (genellikle dikey) boyunca nasıl hizalanacağını belirler. Kapsayıcı içindeki öğelerin dikey konumlandırmasını kontrol eder.
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}flex-start: Öğeleri yukarıya doğru hizalar.flex-end: Öğeleri aşağıya doğru hizalar.center: Öğeleri ortaya doğru hizalar.baseline: Öğelerin içindeki metin taban çizgisini baz alarak hizalama yapar.stretch(varsayılan): Öğelerin yüksekliklerini kapsayıcıya göre uzatır.
Demo: https://codepen.io/tayfunerbilen/pen/rNBgMVr
align-content
Çok satırlı flex kapsayıcılarında (flex-wrap: wrap; kullanıldığında), satırların çapraz eksen boyunca (genellikle dikey) nasıl hizalanacağını belirler. align-items tek satırdaki öğeleri, align-content ise birden fazla satırdaki öğe gruplarını hizalar.
.container {
align-content: stretch | flex-start | flex-end | center | space-between | space-evenly;
}flex-start: Satırları dikey eksende başta hizalar.flex-end: Satırları dikey eksende sonda hizalar.center: Satırları dikey eksende ortalar.stretch(varsayılan): Satırları hizalamaz, yüksekliklerini uzatır.space-between: İlk satır başta, son satır sonda olmak üzere diğer satırları dikey eksende ortalar.space-evenly: Satırlar arası ve kenarlar arası boşlukları eşit dağıtır.
Demo: https://codepen.io/tayfunerbilen/pen/qBWGare
Öğeler (items) için Flex Özellikleri
Yukarıda anlatılanlar kapsayıcıya ait özelliklerdi. Şimdi de flex kapsayıcısının içindeki tekil öğeler için kullanabileceğimiz esnek yapı özelliklerine göz atalım.
order
Öğelerin varsayılan HTML sırasını değiştirmek için kullanılır. Varsayılan değeri 0’dır. Negatif değerler de verilebilir.
.item5 {
order: 6;
}
.item6 {
order: 5;
}Demo: https://codepen.io/tayfunerbilen/pen/OJLYRez
flex-grow
Bir öğenin, kapsayıcıda kalan boşluğu ne kadar dolduracağını belirler. Varsayılan değeri 0’dır, yani öğe büyümeyecektir. Değer 1 veya daha yüksek olduğunda, öğe boş alanı doldurmak için büyür. Daha yüksek bir değer, öğenin diğerlerine göre daha fazla büyüyeceği anlamına gelir.
.item {
flex-grow: 1;
}
.item4 {
flex-grow: 2;
}
.item5 {
flex-grow: 4;
}Demo: https://codepen.io/tayfunerbilen/pen/WNeBoNg
flex-shrink
flex-grow özelliğinin tam aksine, bir öğenin kapsayıcı alan yetersiz kaldığında ne kadar küçüleceğini belirler. Varsayılan değeri 1’dir, yani öğe küçülmeye izin verir. Daha yüksek bir değer, öğenin diğerlerine göre daha hızlı küçüleceği anlamına gelir.
.item4 {
flex-shrink: 2;
}
.item5 {
flex-shrink: 3;
}Demo: https://codepen.io/tayfunerbilen/pen/zYOQorx
flex-basis
Öğenin ana eksen boyunca başlangıç boyutunu belirler. Öğenin flex-grow veya flex-shrink devreye girmeden önceki ideal boyutudur. Tüm uzunluk birimleri (px, %, em vb.) kullanılabilir. Varsayılan değeri auto‘dur.
.item3 {
flex-basis: 40%;
}
.item4 {
flex-basis: 0;
}Demo: https://codepen.io/tayfunerbilen/pen/rNBgmQL
flex
Sırasıyla flex-grow, flex-shrink ve flex-basis özelliklerinin kısa kullanımıdır. İlk değer (flex-grow) zorunlu olup, diğerleri isteğe bağlıdır. Varsayılan olarak 0 1 auto değerine sahiptir. En sık kullanılan değerlerden biri flex: 1;‘dir ki bu da flex: 1 1 0%; anlamına gelir.
.item1 {
flex: 1 1 auto;
}align-self
align-items özelliğinin tekil bir öğe üzerindeki versiyonudur. Bir öğenin, kapsayıcının align-items özelliğini geçersiz kılarak kendi çapraz eksen hizalamasını belirlemesini sağlar.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}Demo: https://codepen.io/tayfunerbilen/pen/PoYvbzR
Örnek Uygulamalar
Flex yapısının çalışma prensibini anladığımıza göre, şimdi de gerçek hayattan bazı pratik örneklere göz atalım.
HEADER ÖRNEĞİ
Solda logo, ortada menü ve sağda giriş/kayıt butonlarının olduğu yaygın bir header yapısını flexbox ile kolayca oluşturabiliriz. Bu yapı, üç eşit parçaya bölünmüş, sol ve sağ kenarlara hizalanmış ve ortadaki menünün ortalanmış olduğu bir düzeni ifade eder.
Demo: CSS Flex Menü Örneği
TEMEL LAYOUT ÖRNEĞİ
Header, sol sidebar, ortada içerik, sağ sidebar ve footer içeren temel bir web sayfa düzenini flexbox ile kurmak oldukça basittir.
Demo: CSS Flex Layout Örneği
Bu örnekte dikkat edilmesi gereken önemli noktalar: Orta alanın scroll olmasını istiyorsanız, kapsayıcısına flex-grow: 1; ve min-height: 0; eklediğinizden emin olun. Ayrıca, sidebar alanlarına min-width vermek, orta alanın içeriği çok dolu olduğunda sidebar’ların beklenmedik şekilde küçülmesini engeller. Responsive versiyonu için bu linke göz atabilirsiniz: https://codepen.io/tayfunerbilen/pen/OJLYmoa
STICKY FOOTER ÖRNEĞİ
İçerik kısa olduğunda bile footer’ın sayfanın en altında sabit kalmasını sağlamak, flexbox ile birkaç satır kodla çözülebilecek basit bir iştir. Eskiden bu, oldukça karmaşık CSS çözümleri gerektiriyordu.
Demo: CSS Flex Sticky Footer Örneği
Burada footer öğesine uygulanan margin-top: auto; sihirli bir şekilde footer’ı en alta iter. margin: auto; değeri flexbox içinde oldukça güçlü bir hizalama aracı olabilir.
CHAT ARAYÜZÜ ÖRNEĞİ
Flexbox’ın sağladığı esneklikle, dinamik ve kullanıcı dostu bir sohbet arayüzü oluşturmak da mümkündür.
Demo: CSS Flex Chat Layout Örneği
Prefix (Ön ekler)
Eski tarayıcılarda uyumluluğu sağlamak için flexbox özelliklerini kullanırken tarayıcı ön ekleri (vendor prefixes) kullanmak gerekebilir. Modern tarayıcılar artık çoğu flexbox özelliğini ön ek olmadan desteklese de, eski sürümler için aşağıdaki gibi kullanımlar önemlidir:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}Gulp veya Webpack gibi görev yöneticileri kullanıyorsanız, Autoprefixer eklentisi CSS’inizi derlerken bu ön ekleri otomatik olarak ekleyebilir. SASS kullanıyorsanız, özel mixin’ler bu süreci daha da basitleştirebilir.
Tarayıcı Desteği
Flex layout özelliklerinin tarayıcı desteği günümüzde oldukça geniştir. Modern web geliştirme için flexbox neredeyse evrensel olarak desteklenmektedir. Detaylı ve güncel tarayıcı desteği bilgisi için caniuse.com/flexbox adresini ziyaret edebilirsiniz.
Web geliştirme yolculuğunuzda, özellikle responsive tasarımlar ve karmaşık düzenler oluştururken Flexbox, en güçlü müttefiklerinizden biri olacaktır. Float ve clear gibi eski yöntemlerle uğraşmak yerine, bu modern ve sezgisel yaklaşımla çok daha hızlı, temiz ve etkili sonuçlar elde edeceksiniz. Flexbox’ın sunduğu bu esneklik, projelerinizde karşılaştığınız düzenleme zorluklarını ortadan kaldırarak yaratıcılığınıza daha fazla alan açacaktır.