Flex’i kullanmamızın en büyük sebebi, esnek yapıları kolayca yönetmek için. Çünkü yapıya esneklik verdiği için, yatay ve dikey hizalarda nasıl görüneceğini, öğelerin kendi içinde hizalanmalarını ve sırasını belirlemek gibi güzel özellikleri bulunuyor. Ayrıca tüm çözünürlüklerde ve cihazlarda daha hızlı ve esnek bir yapı kullanmak için, flex bizim tamda ihtiyacımız olan şey.

Flex genel anlamıyla bir CSS özelliğinin adı değil, yapının adıdır. Dolayısı ile flex yapısı altında hem kapsayıcı (container) için hemde içindeki öğeler (items) için birden fazla flex özelliği bulunmaktadır. Bu makalede hepsini incelemeye ve anlamaya çalışacağız.

Kapsayıcı (Container) için Flex Özellikleri

Flex modülü hem kapsayıcı hem de öğeler için özellikler sunuyor. İlk olarak kapsayıcı için hangi özellikler var, nasıl kullanılıyor bunlara bir göz atalım.

display

display: flex; ya da display: inline-flex; kullanılarak kapsayıcı içerisindeki öğelere artık esneklik vermeye başlayabiliriz. Bu tanımla artık bu kapsayıcının esnek bir görünümde olduğunu belirtiyoruz. flex ile inline-flex farkı, block ile inline tanımları ile aynıdır.

flex-direction

Öğelerin yönünü belirlemek için kullanılır. Varsayılan olarak flex container yataya doğru uzar. Dolayısı ile bu kapsayıcı içindeki tüm öğeler yan yana listelenir. Bu özelliğin aldığı birkaç değeri inceleyip ne işe yaradıklarını anlayalım;

• 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.

flex-wrap

• nowrap (varsayılan) = Tüm öğeleri tek bir satırda yan yana listeler.
• 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.

flex-flow

Bu özellik flex-direction ve flex-wrap özelliklerinin kısayoludur. Her ikisini tek bir özellikte tanımlayarak kullanabilirsiniz. Yani şu şekilde yazmak yerine;

Şu şekilde yazabilirsiniz;

.container {
    flex-flow: column wrap;
}

Öğeler Arası Boşluk (Gap):

Öğeler arasına boşluk ekler.

.container {
gap: 10px; /* veya **row-gap ve column-gap kullanarak 
yatay ve dikey boşlukları kontrol edebilirsiniz** */
}

justify-content

Öğelerin yatay eksende hizasını ayarlamak için kullanılır. Birde değerlerin ne işe yaradıklarına bakalım.

• 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 dayalı, son öğe sağa dayalı ve diğerleri ortalı olacak şekilde hizalar.
• space-around = İlk ve son öğe hariç diğerlerinin arası eşit olacak şekilde hizalar.
• space-evenly = Tüm öğelerin arası aynı eşitlikte olacak şekilde hizalar.

align-items

Öğelerin dikey eksende hizasını ayarlamak için kullanılır. Birde değerlerin ne işe yaradıklarına bakalım.

• 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 ilk satırı baz alarak ortalama yapar.
• stretch (varsayılan) = Hizalama yapmaz, öğelerin yüksekliklerini kapsayıcıya göre uzatır.

align-content

Çok satırlı yapılarda öğelerin dikey eksende hizasını ayarlamak için kullanılır. Birde değerlerin ne işe yaradıklarına bakalım.

• flex-start = Ögeleri dikey eksende başta hizalar.
• flex-end = Ögeleri dikey eksende sonda hizalar.
• center = Ögeleri dikey eksende ortalı hizalar.
• stretch (varsayılan) = Ögeleri hizalamaz, yüksekliklerini uzatır.
• space-between = İlk satırdaki ögeler başta, son satırdaki ögeler sonda olmak üzere diğer satırdaki öğeleri dikey eksende ortalar.
• space-evenly = Öğeleri satırlar arası eşit oranda olacak şekilde dikey eksende ortalar.

Öğeler (items) için Flex Özellikleri

Yukarıda anlatılan flex özellikleri, kapsayıcıya aitti. Birde içindeki öğeler için esnek yapıda neler yapabiliyoruz, onlara gözatalım.

order

Öğelerin sıralanışını değiştirmek için kullanılır. Burada dikkat edilmesi gereken, varsayılan olarak 0 olduğu için tüm öğeler, eğer sonuncu öğeyi bir öncesine almak isterseniz, bir önceki öğeninde order değerini belirtmeniz gerekir.

.item5 {
    order: 6;
}
.item6 {
    order: 5;
}

flex-grow

Bir öğeyi diğerlerine göre daha büyük göstermek için bu özelliği kullanıyoruz. Varsayılan değeri 0’dır. Eğer öğelerden birisinin değerini 2 yaparsanız diğerlerine göre daha büyük olacaktır ancak kalanı daralacaktır. İlk olarak tüm öğelerin değerini 1 yapıp, daha sonra bir öğenin değerini 2 yaparsanız, sonuç olarak diğer öğelere göre 2 kat daha büyük bir öğeye sahip olacaksınız.

.item {
    flex-grow: 1;
}
.item4 {
    flex-grow: 2;
}
.item5 {
    flex-grow: 4;
}

flex-shrink

Bu aslında flex-grow özelliğinin tam aksine, küçültme işlemi için kullanılır. Varsayılan olarak değeri 1’dir. Eğer bir öğeye değer olarak 2 verirseniz, diğerlerine göre küçülmesi gerektiğinde daha önce küçülecektir. Değeri artırırsanız örneğin 4. öğeye 2, 5. öğeye 3 değeri verirseniz, küçülme esnasında her ikiside küçülecektir ancak 5. öğe 4. öğeye göre daha hızlı küçülecektir. Zaten bu öğelerde artık küçülecek yer kalmadığında diğer öğeler küçülmeye başlar. Esnek yapılarda bildiğiniz gibi kapsayıcıya göre genişlik ve yükseklik ayarlanmaktadır. Bu gibi durumlarda büyümeye ve küçülmeye müdahale için bu özellik işe yarayacaktır.

.item4 {
    flex-shrink: 2;
}
.item5 {
    flex-shrink: 3;
}

flex-basis

Öğelerin eğer alanı yetiyorsa olması gereken genişliği belirlemek için kullanılır. Değer olarak tüm uzunluk birimleri (px, pt, em vb.) kullanılabilir. Varsayılan olarak değeri auto’dur. Eğer değer olarak 0 belirlenirse, doğrudan sadece içindeki değer kadar genişliği olur.

Örneğin 3. öğeye %40, 4. öğeye ise 0 değerlerini verdiğimizde yukarıdaki gibi bir sonuç elde ederiz.

.item3 {
    flex-basis: 40%;
}
.item4 {
    flex-basis: 0;
}

flex

Sırasıyla flex-grow, flex-shrink ve flex-basis özelliklerinin kısa kullanımıdır. İlk değeri zorunlu olup (shrink ve basis) değerlerini belirtmek zorunlu değildir. Varsayılan olarak 0 1 auto değerine sahiptir. Ve en sık kullanımı da şöyledir;

.item1 {
    flex: 1 1 auto;
}

align-self

align-content ile aynı işlemleri yapar. Dikey eksende öğelerin nasıl hizalanacağı belirlenir. Tek farkı kapsayıcı yerine bunu öğelere uygulamasıdır.

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

Sonuç olarak

Front-end geliştirme yaparken en sık kullandığımız yapılardan birisi olacak flex yapısı.