10.07.2024
3
Beğenme
546
Görüntülenme
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.
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: 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.
Öğ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.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.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ına boşluk ekler.
.container {
gap: 10px; /* veya **row-gap ve column-gap kullanarak
yatay ve dikey boşlukları kontrol edebilirsiniz** */
}
Öğ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.Öğ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.Ç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.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.
Öğ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;
}
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;
}
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;
}
Öğ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;
}
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-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;
}
Front-end geliştirme yaparken en sık kullandığımız yapılardan birisi olacak flex yapısı.
Kullanıcı yorumlarını görüntüleyebilmek için kayıt olmalısınız!