CSS Komple Flexbox Kullanım Rehberi

Öncelikle rehber CSS Tricks sitesinden ilham alınarak yapılmıştır. Çoğu yeri kendime göre çevirerek yaptım ayrıca resimleri oradan aldım.

Neden Flexbox?

Önceden front-end geliştiriciler nesneleri istedikleri yerde konumlandırmak için position ve float gibi özellikler kullanıyorlardı. İşe yaramıyor muydu? Yarıyordu. Ancak bazı şeyleri o özellikleri kullanarak yapmak nerdeyse imkânsız ve oldukça zordu.

Örnek verilecek olursa:

• Dikey olarak bir elemanı ortalama,
• Bir konteynırın içindeki tüm elemanların, genişlik ve yükselik bakılmaksızın mevcut yükselik ve genişlik değerlerine göre eşit olarak alan kaplaması
• Birden çok sütunlu sistemde tüm sütunların içindeki içeriğe bakılmaksızın aynı yükseliğe sahip olması

İşte Flexbox bu ve çok daha fazla yerleşim işini daha pratik ve kolay şekilde yapar!

NOT: Özellikler, Parent özellikleri ve Children özellikleri olmak üzere iki konu altında toplanacaktır.

Parent Özellikleri (Flex Container)

1) display

Verilen değerlere bağlı olarak değişen bir esnek kutu (kap da denebilir) oluşturmamızı sağlar. Sütunların bu esnek kap üzerinde bir etkisi yoktur.

.container {
  display: flex; /* ya da inline-flex */
}

2) flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Row; normal satır düzeyinde hizalamayı belirler. Row-reverse tersi şekilde sağdan sola hizalar.

Column ise sütun düzeyinde hizalayıp column-reverse de tersi şekilde hizalar.

3) flex-wrap

Normalde şartlar altında flex bir konteynırın içindeki kutular tek bir satıra sığmaya çalışır. Flex-wrap ile bu durumu değiştirebiliriz.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap: Varsayılan olarak elemanlar tek satırda sıralanır.

wrap: Elemanlar otomatik olarak boyuta göre birden fazla satırda sıralanabilir.

wrap-reverse: Elemanlar aşağıdan yukarıya doğru olacak şekilde birden fazla satırda sıralanabilir.

4) flex-flow

flex-direction ve flex-wrap'ın kısaltılmış hâlidir. Varsayılan değeri row nowrap'dır.

.container {
  flex-flow: column wrap;
}

5) justify-content

Satır düzeyinde çalışıp yatay olarak hizalamaya olanak tanıyan bu özellik, konteynırın içi maksimum boyutlara ulaştığında bizim için boşluk yaratabilir. Ayrıca taşma sırasında elemanların kontrolü sağlamak için de kullanılabilir.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (varsayılan): Konteynırın başlangıç yönüne doğru hizalanır.
• flex-end: Konteynırın sonundan başlangıç yönüne doğru hizalanır.
• start: Elemanlar yazma-moduna göre konteynırın başlangıcından sonuna doğru hizalanır.
• end: Elemanlar yazma-moduna göre konteynırın sonundan başlangıcına doğru hizalanır.
• left: Bu özellik, flex-direction ile kullanılıp sonuç vermediği durumlarda startözelliğine benzer bir şekilde öğelerin sola doğru hizalanmasını sağlar.
• right: Bu özellik, flex-direction ile kullanılıp sonuç vermediği durumlarda startözelliğine benzer bir şekilde öğelerin sağa doğru hizalanmasını sağlar.
• center: Satırın ortasına doğru hizalanır.
• space-between: Elemanlar satır içinde birbirleri arasında eşit aralık olacak şekilde sıralanır. İlk eleman en başa ve son eleman da en sona yaslanır.
• space-around: Elemanlar yanlarındaki elemanlara göre aralarında eşit boşluk olacak şekilde sıralanır. İlk baştaki eleman ile konteynır kenarı arasında olan mesafe ile ikinci eleman ile arasındaki mesafe eşit değil çünkü bir sonraki elemanın da kendi aralığı mevcut. Dolasıyısı ile iki boşluğun toplamı katılıyor.
• space-evenly: Elemanlar ve kenarlar da dâhil olmak üzere konteynır içerisindeki tüm boşluklar birbirine eşittir.

NOT: Bu özelliklerin bazı tarayıcılar için geçerli olup bazılarında geçerli olmadığını unutmayın. Örneğin space-between özelliği Edge'de hiçbir zaman olmayıp, start/end/left/right özellikleri de Chrome'da yoktur. En sağlıklı kullanım flex-start, flex-end, ve center özellikleridir. (Yaşasın Firefox)

6) align-items

Bu özellik Flex elemanların konteynır üzerinde bulunduğu satırda çapraz (dikey ve yatay) olarak nasıl hizalanması gerektiğini belirler. Bunu çapraz eksenin justify-content 'i olarak düşünebiliriz.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch (varsayılan): max-width ve min-width değerlerini aşmadan kabı doldurmak için konteynırı ölçeklendirir.
• flex-start / start / self-start: Çapraz eksenin başlangıcına doğru hizalanır. Bunların arasındaki ince fark flex-direction ya da writing-mode kurallarına uymakla ilgilidir.
• flex-end / end / self-end: Çapraz eksenin sonundan başlangıcına doğru hizalanır. Bunların arasındaki ince fark flex-direction ya da writing-mode kurallarına uymakla ilgilidir.
• center: Çapraz eksenin ortasına doğru hizalanır.
• baseline: Elemanlar taban çizgisine göre hizalanır.

7) align-content

Çapraz eksene sahip bir konteynırda, oluşacak boşluk durumlarında elemanları hizalamak için kullanılır. justify-content özelliğinin elemanları tek tek ana eksende hizalamasına benzer.

Not: Bu özellik yalnızca çoklu satırlı flex konteynırlarında çalışır. (Bu örnekteflex-flow ,wrap ya da wrap-reverse olarak ayarlanmıştır). Tek satırlı flex konteynırlarda (örnepin flex-flow varsayılan değer ise; no-wrap) align-content'i kullansanız bile çalışmayacaktır.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal (default): Elemanlar varsayılan olarak normalde olması gerektiği gibi konumlandırılacaktır.
• flex-start / start: Elemanlar başlangıç pozisyonunda konumlanacaktır. flex-start (daha fazla önerilen) flex-direction yönünden konumlandırıp, start ise yazma-modu baza alınarak konumlandırır.
• flex-end / end: Elemanlar konteynırın sonundan başlangıç pozisyonuna doğru konumlanacaktır flex-end (daha fazla önerilen) flex-direction yönünden konumlandırıp, end ise yazma-modu baza alınarak konumlandırır.
• center: Elemanlar konteynırın merkezine doğru sıralanacaktır.
• space-between: Elemanlar eşit olacak şekilde dağıtılır. İlk eleman en başta ve son eleman da en sonda sıralanır.
• space-around: Her satırdaki elemanlar aralarında eşit mesafede boşluklar olacak şekilde sıralanır.
• stretch: Elemanlar kalan boş alanı kaplayacak kadar uzar.

Children Özellikleri (Flex Items)

1) order

Elemanlar varsayılan olarak eklenme sırasına göre dizilir. Order özelliği sayesinde istediğimiz elemanın yerini istediğimiz konuma taşıyabiliriz.

.item {
  order: 5; /* varsayılan değer 0 */
}

2) flex-grow

flex-grow özelliği verilen orana göre flex elemanlarının büyümesi gerektiği durumlarda kullanılır. Örneğin alttaki satırda 2 numaralı kutu diğerlerine oranla 2 katı alana sahiptir. Flex-grow özelliği kalan boş alanları değerlendirmek için de kullanılabilir.

Tüm elemanlardaki flex-grow değeri 1 ise konteynır içindeki alan Children'lara eşit olarak dağıtılacaktır.

.item {
  flex-grow: 4; /* default 0 */
}

Negatif sayılar geçersizdir.

3) flex-shrink

Bu özellik esnek öğenin gerektiğinde küçülme davranışını tanımlar.

.item {
  flex-shrink: 3; /* default 1 */
}

Negatif sayılar geçersizdir.

4) flex-basis

Bu özellik, kalan boş alan dağıtılmadan önce elemanların varsayılan boyutunu tanımlar. Değer olarak herhangi bir uzunluk birimi (1px, 1.5rem, 50%) ya da anahtar kelime (auto vb.) olabilir. auto anahtar kelimesi "width ya da heigh değerlerine bak"

anlamına gelir. content anahtar kelimesi "bu öğeyi içeriğine göre boyutlandır" anlamına gelir. (Bu anahtar kelime henüz yeterince desteklenmemektedir. Zira kardeş elemanların max-content, min-content vefit-content değerlerini bilmediğimizden test etmesi daha zordur.)

.item {
  flex-basis:  | auto; /* default auto */
}

Değer 0 olarak ayarlanırsa kalan boşluklar hesaba katılmaz. Auto olarak ayarlanırsa ekstra alan flex-grow'a göre dağıtılır.

5) flex

Bu özellik, flex-grow, flex-shrink ve flex-basis özelliklerinin kısaltmasıdır.

İkinci ve üçüncü parametreler (flex-shrink ve flex-basis) isteğe bağlıdır.

Varsayılan olarak değerler sırasıyla 0 1 auto şeklindedir ancak sadece rakam kullanmak istiyorsak da 1 0 gibi bir kullanım da söz konusu olabilir.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Tek tek özellikleri ayarlamak yerine flex kısaltışını yazmak önerilir.

6) align-self

Bu özellik, konteynırda children'lar için belirtilmiş olan (veya align-items ile belirtilmiş olan) davranışları geçersiz kılıp kendi özelliğini aktif eder.

Verilen değerleri anlamak için align-items kısmındaki değerlere göz atın; zira aynılar.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

NOT: float, clear ve vertical-align özelliklerinin flex elemanlarının üzerlerinde etkisi olmadığını unutmayın.

Tarayıcı Uyumluluğu

Faydalı Linkler

Yazıda da belirttiğim üzere Write-Mode nedir?

MDN Flexbox

W3.org Flexbox Anlatımı

Kişisel Web Sitem