CSS Flexbox - koddla

CSS Sayfa Düzeni

Flexbox nedir ile başlayalım. Flexbox, öğeleri satırlarda veya sütunlarda düzenlemek için kullanabileceğimiz tek boyutlu bir CSS düzen yöntemidir. Flex kutu içerisindeki öğeler ek alanı doldurmak için esner (genişler) veya daha küçük alanlara sığacak şekilde küçülür.

Neden Flexbox?

Uzun bir süre CSS düzenleri oluşturmak için kullanılabilen tek güvenilir tarayıcılar arası uyumlu araçlar float ve konumlandırma gibi özelliklerdi. Bunlar işe yarıyor olsa da bazı yönlerden de sınırlayıcı ve sinir bozucudurlar.

Örneğin aşağıdaki basit tasarımları bu tür araçlarla kullanışlı ve esnek bir şekilde elde etmek zor veya imkansızdır:

Bir içerik bloğunu dikey olarak ortalama.
Bir kutu içerisindeki tüm öğelerin, ne kadar genişlik/yükseklik olduğuna bakılmaksızın, kullanılabilir genişlik/yüksekliğin eşit miktarda almasını sağlamak.
Çok sütunlu düzendeki tüm sütunların farklı miktarda içerik içerseler bile aynı yükseklikte olmasını sağlama.

Sonraki bölümlerde göreceğiniz gibi, flexbox birçok düzen görevini çok daha kolay hale getirir. Hadi başlayalım!

Flexbox ile tanışın – Basit bir örnek

Bu makalede, flexbox’ın nasıl çalıştığını anlamanıza yardımcı olmak için bir dizi alıştırma üzerinde duracağız. Başlamak için, ilk başlangıç dosyasının yerel bir kopyasını yapmanızı tavsiye ederiz — Mozilla github reposundan flexbox0.html dosyasına ulaşabilirsiniz. Modern bir tarayıcı ile (Firefox veya Chrome gibi) açın ve kod düzenleyicinizdeki koda bir göz atın:

Göreceğiniz üzere, bir <header> elemanı içerisinde bir başlık ve <article> içerisinde <section> elemanlarına sahip bir sayfamız var. Bu öğeleri kullanarak üç sütunlu standart bir görünüm oluşturacağız.

Hangi elementlerin flex kutu olacağını belirtme

Başlarken flex-kutu olarak hangi öğeleri seçeceğimizi belirmemiz lazım. Bunu yapmak için, kutu olarak seçeceğimiz öğelerin üst öğesine özel bir display değeri ayarlıyoruz. Bu durumda <article> elemanlarını düzenlemek istiyoruz, bu yüzden bunu <section> üzerine display atıyoruz – display:flex

section {
  display: flex;
}

Böylece <section>element’ini bir flex-kutuya ve alt öğelerinin flex öğelere dönüştürüyoruz. Bunun sonucu şöyle olmalıdır:

Bu display özelliği bize ihtiyacımız olan her şeyi veriyor. İnanılmaz, değil mi? Eşit genişlikteki sütunlara sahip birden fazla sütun düzenimiz var ve sütunların hepsi aynı yükseklikte. Bunun nedeni, flex öğelere (flex kutunun alt öğeleri) verilen varsayılan değerlerin bu gibi yaygın sorunları çözmek için ayarlanmış olmasıdır.

Açık olmak için burada neler olduğunu tekrarlayalım. Display değeri verdiğimiz öğe sayfanın geri kalanıyla nasıl etkileşimde bulunduğunu gösteren blok düzeyinde bir öğe gibi davranıyor, ancak çocukları flex öğeler olarak ortaya çıkıyor. Bir sonraki bölümde bunun ne anlama geldiği daha ayrıntılı olarak açıklayacağız. Ayrıca, bir öğenin alt öğelerini flex öğeler olarak düzenlemek, ancak bu öğenin satır içi öğe gibi davranmasını istiyorsanız display:inline-flex değerini de kullanabileceğinizi unutmayın.

Flex modeli

Öğeler flex öğeler olarak ayarlandığında iki eksen boyunca yerleştirilir:

Ana eksen (main axis), flex öğelerin tanımlandığı yönde çalışan eksendir (örneğin, sayfa boyunca satırlar veya sayfanın aşağısındaki sütunlar olarak) Bu eksenin başlangıcı ve sonu ana başlangıç (main start) ve ana uç (main end) olarak adlandırılır.
Çapraz eksen (cross axis), flex öğelerin tanımlandığı yöne dik çalışan eksendir. Bu eksenin başlangıcı ve sonu çapraz başlangıç (cross start) ve çapraz uç (cross end) olarak adlandırılır.
Üst düzeyde display: flex olarak ayarlanan üst öğeye (örneğimizde <section>) flex kutu (flex container) denir.
Flex kutu içinde flex kutular olarak ortaya konan öğelere flex öğeler (flex items) denir (örneğimizdeki <article>).

Sonraki bölümler için bu terminolojiyi aklınızda bulundurmanızda fayda var. Kullanılan terimlerden herhangi biri hakkında kafanız karışırsa tekrar buraya dönebilirsiniz.

Sütunlar mı, satırlar mı?

Flexbox, ana eksenin hangi yönde çalıştığını (flexbox alt öğelerinin hangi yöne yerleştirildiği) belirten flex-direction adlı bir özellik sağlar. Varsayılan olarak bu, tarayıcınızın varsayılan dilin çalıştığı yönde bir satırda ortaya konmaları için row olarak ayarlanır (İngilizce tarayıcı söz konusu olduğunda soldan sağa).

<section>‘a aşağıdaki bildirimi eklemeyi deneyelim:

flex-direction: column;

Bu değişiklik ile öğelerin herhangi bir CSS eklemeden önceki gibi bir sütun düzenine döndüğünü göreceksiniz. Devam etmeden önce, bu bildirimi örneğinizden silin.

Not: row-reverse ve column-reverse değerlerini kullanarak esnek öğeleri ters yönde de ayarlayabilirsiniz. Bu değerlerle de denemeler yapın.

Taşma (wrapping)

Sabit bir genişlik veya yüksekliğe ile çalışırken ortaya çıkan bir sorun, flex-öğelerin kutulardan taşarak düzeni bozmaları olabilir.

Burada öğelerin gerçekten de kutunun dışına çıktıklarını görüyoruz. Bunu düzeltmenin bir yolu, <section>‘a aşağıdaki bildirimi eklemek:

flex-wrap: wrap;

Ayrıca, <article>‘a aşağıdaki bildirimi ekleyin:

flex: 200px;

Bunu denediğinizde düzenin çok daha iyi olduğunu göreceksiniz:

Artık birden fazla satırımız var. Her satırın içine sığacak kadar çok fleks kutusu çocuğu yerleştirdik. Herhangi bir taşma öğenin bir sonraki satıra taşınmasına sebep olacak. Burada ayarlanana flex: 200px‘e göre her bir öğe en az 200px genişliğinde olacak. Bu özelliği daha sonra ayrıntılı olarak tartışacağız. Son satırdaki son birkaç öğenin daha geniş hale geldiğini ve böylece tüm satırın hala dolu olduğunu da fark edebilirsiniz.

Ama burada yapabileceğimiz daha çok şey var. Her şeyden önce, flex-direction özelliğini row-reverse olarak değiştirmeyi deneyin. Hala birden fazla satır düzenine sahibiz, ancak tarayıcı penceresinin karşı köşesinden başlayan ve tersten akan bir düzenimiz var.

flex-flow kısayolu

Bu noktada, flex-direction ve flex-wrap için bir kısayol olduğunu belirtmek gerekir: flex-flow. Bu nedenle aşağıdaki ile,

flex-direction: row;
flex-wrap: wrap;

aşağıdakini değiştirebiliriz:

flex-flow: row wrap;

flex öğelerin esnek boyutlandırılması

Şimdi ilk örneğimize dönelim ve bir flex öğenin diğer flex öğelere kıyasla hangi oranda yer kapladığı ile ilgilenelim. Bu özelliğin nasıl değiştirebileceğimizi bakalım:

İlk olarak, CSS’nize aşağıdaki kuralı ekleyin:

article {
  flex: 1;
}

Bu, her esnek öğenin diğer esnek öğelere kıyasla ana eksen boyunca ne kadar kullanılabilir alan kaplayacağını belirten, birimden bağımsız bir oran değeridir. Bu durumda, her <article>‘a aynı değeri (1 değeri) veriyoruz, bu da doldurma ve kenar boşluğu gibi özellikler ayarlandıktan sonra kalan boş alanın eşit miktarda dağıtılacağı anlamına gelir. Bu değer flex öğeler arasında orantılı olarak paylaştırılır: her flex öğeye 400000 değeri vermek de tam olarak aynı etkiye sahip olacaktı.

Şimdi bir öncekinin altına aşağıdaki kuralı ekleyin:

article:nth-of-type(3) {
  flex: 2;
}

Bu sefer üçüncü <article>‘ın diğer ikisine göre iki kat daha fazla yer kapladığını göreceksiniz. Şu anda toplam dört oran birimi mevcut (1 + 1 + 2 = 4). İlk iki flex öğenin her biri bir üniteye sahip, bu nedenle her biri kullanılabilir alanın 1/4’ünü aldı. Üçüncüsü iki üniteye sahip, bu nedenle de kullanılabilir alanın 2/4’ünde alan kapladı.

Flex için minimum boyut değeri de belirtebilirsiniz. Şu şekilde güncelleyelim:

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

Böylece, “Her esnek öğeye önce kullanılabilir alanın 200px’i verilsin. Bundan sonra mevcut alanın geri kalanı oran birimlerine göre paylaştırılsın.” demiş olduk.

Flexbox’ın gerçek değeri esnemesinde/yanıt vermesinde görülebilir. Tarayıcı penceresini yeniden boyutlandırırsanız veya başka bir <article> eklerseniz düzenin hala gayet iyi çalışmaya devam ettiğini görürsünüz.

flex: kısayola karşı uzun yol

flex, en fazla üç farklı değer belirtilebilen bir kısayol özelliğidir:

Yukarıda tartıştığımız birimsiz oran değeri. Bu değer flex-grow ile ayrı bir şekilde belirtilebilir.
İkinci bir birimsiz oran değeri olan flex-shrink, flex öğeler kutularından taştığında devreye girer. Bu değer, taşmayı önlemek için bir öğenin ne kadar küçüleceğini belirtir. Bu oldukça gelişmiş bir flexbox özelliğidir ve bu makalede daha fazla ele almayacağız.
Yukarıda tartıştığımız minimum boyut değeri. Bu değer flex-basis ile ayrı bir şekilde belirtilebilir.

Gerçekten zorunda olmadığınız sürece (örneğin, önceden ayarlanmış bir şeyi geçersiz kılmak için) uzun yol flex özelliklerini kullanmanızı tavsiye etmeyiz. Çok fazla ekstra kod yazılmasına yol açarlar ve biraz da kafa karıştırıcı olabilir.

Yatay ve dikey hizalama

Flexbox özelliklerini, flex öğeleri ana veya çapraz eksen boyunca hizalamak için de kullanabilirsiniz. Yeni bir örneğe bakarak bunu keşfedelim. İlk olarak bu örneğin yerel bir kopyasını alın: esnek hizalama0.html. Bunu düzgün bir flex butona/araç çubuğuna dönüştüreceğiz. Şu anda sol üst köşeye sıkışmış bazı butonların yer aldığı yatay bir menü çubuğu göreceksiniz.

Şimdi, örneğin CSS’sinin altına aşağıdakileri ekleyin:

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Sayfayı yenileyin ve butonların artık yatay ve dikey olarak güzelce ortalanmış olduğunu göreceksiniz. Bunu iki yeni özellik üzerinden yaptık.

align-items, flex öğelerin çapraz eksende nerede oturduğunu denetler.

Varsayılan değer, stretch, üst öğeyi çapraz eksen yönünde doldurmak için tüm flex öğeleri genişleten değerdir. Üst öğenin çapraz eksen yönünde sabit bir genişliği yoksa, tüm flex öğeler en uzun flex öğe kadar uzar. İlk örneğimizde varsayılan olarak eşit yükseklikte sütunlar bu şekilde vardı.
Yukarıdaki kodumuzda kullandığımız center değeri, öğelerin iç boyutlarını korumasına, ancak çapraz eksen boyunca ortalanmış olmasına neden olur. Bu nedenle mevcut örneğimizin düğmeleri dikey olarak ortalar.
Ayrıca, çapraz eksenin başına veya sonuna tüm öğeleri hizalayacak flex-start ve flex-end gibi değerleri de kullanabiliriz.

Flex öğeler için align-items davranışı tek tek öğelere uygulanan align-self özelliği ile geçersiz kılınabilir. Örneğin, CSS’nize aşağıdakileri eklemeyi deneyin:

button:first-child {
  align-self: flex-end;
}

Bunun nasıl bir etkisi olduğuna bir göz atın; sonra tekrar kaldırın.

Ana eksendeki flex öğeler için justify-content:

Varsayılan değer, flex-start, tüm öğelerin ana eksenin başından itibaren dizilmesini sağlayan değerdir.
Sondan dizilmeyi flex-end ile sağlayabiliriz.
Flex öğelerin ana eksenin ortasına durmasını için justify-content:center kullanırız.
Yukarıdaki örnekte kullandığımız değer space-around ise tüm öğeleri ana eksen boyunca eşit olarak dağıtır ve her iki uçta da biraz boşluk bırakır.
space-between değeri ise space-around ile her iki uçta da boşluk bırakmaması dışında çok benzerdir.

Devam etmeden önce nasıl çalıştıklarını görmek için bu değerlerle oynamanızı iyi olur.

Flex öğeleri sıralama

Flexbox ayrıca flex öğelerin sıralamasını değiştirmek için de kullanılabilir. Bu da geleneksel düzen yöntemleriyle yapılması imkansız olan başka bir şeydir.

Buton çubuğu örnek kodunuza aşağıdaki CSS’yi eklemeyi deneyin:

button:first-child {
  order: 1;
}

Yenileyin, “Gülümse/Smile” düğmesinin ana eksenin sonuna taşındığını göreceksiniz. Bunun nasıl çalıştığı hakkında biraz daha ayrıntılı olarak konuşalım:

Varsayılan olarak, tüm esnek öğelerin order değeri 0’dır.
Belirtilen sıralama değerleri daha yüksek olan flex öğeler, daha düşük sıralama değerlerine sahip öğelerden daha sonra görüntülenir.
Aynı sıralama değerine sahip flex öğeleri kaynak sıralamaya göre görünür. Bu nedenle, sıralama değerleri sırasıyla 2, 1, 1 ve 0 olarak ayarlanmış dört öğeniz varsa, görüntüleme sıraları 4., 2., 3., sonra 1. olacaktır
3. öğe, aynı sıralama değerine sahip olduğundan ve kaynak sırada 2.’den sonra olduğundan sıralanırken de 2.’den sonra görünür.

Maddelerin değeri 0 olan maddelerden daha erken görünmesini sağlamak için negatif sıralama değerleri kullanabiliriz. Örneğin, aşağıdakini kullanarak ana eksenin başında “Blush” düğmesinin görünmesini sağlayabilirsiniz:

button:last-child {
  order: -1;
}

İç içe esnek kutular

Flexbox ile oldukça karmaşık düzenler oluşturmak da mümkün. Flex bir öğeyi de flex kutu olacak şekilde ayarlamak sorun değil.

Buradaki HTML oldukça basit. Üç <article> içeren bir <section> var. Üçüncü <article> da üç <div> içerir:

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button

Düzen için kullandığımız koda bakalım.

Her şeyden önce, <section>‘ın alt öğeleri da esnek kutu olacak:

section {
  display: flex;
}

Daha sonra, <article>‘in kendisi için bazı flex değerler belirleyelim. Buradaki 2. kuralı özel olarak not edin: Üçüncü <article>‘ın çocuklarını da flex öğeler gibi yerleştirmek için ayarlıyoruz, ancak bu sefer onları bir sütun olarak düzenliyoruz.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

Ardından, ilk <div>‘i seçiyoruz. İlk olarak en az 100px yükseklik vermek için flex:1 100px; kullanıyoruz, daha sonra çocuklarını (<button>) flex öğeler olacak şekilde ayarlıyoruz. Burada onları bir taşma satırına koyuyoruz ve daha önce gördüğümüz bireysel buton örneğinde yaptığımız gibi mevcut alanın ortasına hizalıyoruz.

article:nth-of-type(3) div:first-child {
  flex:1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

Son olarak, butonun boyutlarını biraz değiştirelim. Bu sefer flex’e 1 auto değerini veriyoruz. Bu, tarayıcınızın pencere genişliğini yeniden boyutlandırmayı denerseniz göreceğiniz çok ilginç bir etkiye sahiptir. Butonlar alabildiği kadar yer kaplar. Bir satıra sığacak kadar; Bunun ötesinde, yeni bir satıra geçerler.

button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

Tarayıcılar arası uyumluluk

Flexbox desteği çoğu yeni tarayıcıda kullanılabilir: Firefox, Chrome, Opera, Microsoft Edge ve IE 11, Android / iOS’un daha yeni sürümleri vb. Ancak, flexbox’ı desteklemeyen (veya destekleyen, ancak gerçekten eski, güncel olmayan bir sürümünü destekleyen) ve hala kullanılan eski tarayıcılar olduğunu da bilmelisiniz.

Flexboxı öğrenirken veya denemeler yaparken bunun çok fazla bir önemi olmayacak; ancak, flexbox’ı gerçek bir web sitesinde kullanmayı düşünüyorsanız, test yapmanız ve kullanıcı deneyiminizin mümkün olduğunca çok tarayıcıda hala kabul edilebilir olduğundan emin olmanız gerekir.

Flexbox bazı CSS özelliklerinden biraz daha zordur. Örneğin, bir tarayıcıda CSS alt gölgesi eksikse, site büyük olasılıkla hala kullanılabilir olacaktır. Bununla birlikte, flexbox özelliklerini desteklememek muhtemelen bir düzeni tamamen bozacak ve kullanılamaz hale getirecektir.

Özet

Flexbox’ın temelleri turumuz sona erdi. Umarız eğlenirsiniz ve öğrenmenize devam ettikçe flexbox ile iyi vakit geçirirsiniz.