Flexbox Layout Module: Flex Item Özellikleri Nelerdir?

Flex Item Özellikleri

Flex container item’ları kapsayan taşıyıcının esnek özellikler sergileyebilmesini sağlamaktaydı. Ancak, iç içe elemanları kullandığımız durum(lar)da veya item’ların kapsayıcının özelliklerinden farklı olarak hareket etmesini isteyebiliriz. Bu gibi noktalarda flex item için sunulan order, flex-grow, flex-shrink, flex-basis gibi özelliklerden faydalanabiliriz. Bu özelliklerin detayların sırasıyla bakalım¹.

Order

Bir flex ya da grid container içerisindeki item’ların sırasına müdahale etmek istediğimizde order özelliğinden faydalanabiliriz. Order kullanırken dikkat etmemiz gereken husus özelliğin varsayılan olarak 0 (sıfır) değeri aldığıdır. Bu nedenle, bir item’ı bir önceki sıraya almak istersek o item’ın öncesindeki item’ın da order değerinde değişiklik yapmamız gerekir².

.item:nth-of-type(2) {
  order: 3;
}

.item:nth-of-type(3) {
  order: 2;
}

order negatif değer alabilir. Item’ler öncelikle aldıkları order değerine (küçükten büyüğe doğru), ardından kaynak koddaki (DOM order) sıraya göre sıralanır1.

Flex-grow

Bir item’ı diğer item’lardan daha büyük (genişlik ve/veya yükseklik) göstermek için flex-grow özelliğini kullanabiliriz. flex-grow varsayılan değer olarak 0 (sıfır) değerine sahiptir2.

Bir item’ın flex-grow değerini 2 olarak tanımladığımızı varsayalım. Bu durumda ilgili item diğerlerinden belirtilen değer (flex grow factor) daha büyüyecek ve diğer item’lar da oranlı bir şekilde küçüleceklerdir. Şayet diğer item’lara 1 (bir) değerini verirsek flex-grow değeri 2 olan item diğerlerinden 2 kat büyük olacaktır³.

.item {
  flex-grow: 1;
}

.item:nth-of-type(3) {
  flex-grow: 2;
}

Unutmadan, flex-grow negatif değer alamaz.

Flex-shrink

flex-shrink item’ım büzülme/daralma faktörünü ayarlar. Tüm item’ların aldığı dğeer flex container’dan büyükse item’lar flex-shrink değerlerine bağlı olarak container’a sığacak şekilde küçülür. Varsayılan olarak 1 (bir) değerine sahiptir ve negatif değer alamaz⁴.

Şayet bir item’a flex-shrink değeri olarak 2 verirsek item diğerlerinden daha fazla küçülecektir. flex-shrink değerine sahip item’lar diğerlerine göre aldıkları değer oranıca küçüldükten sonra diğer item’lar küçülmeye başlarlar3.

.item:nth-of-type(2) {
  flex-shrink: 2;
}

.item:nth-of-type(3) {
  flex-shrink: 0.6;
}

Flex-basis

Flex container’ın içerisinde yer alan item’ların eğer container genişliği yetiyorsa olması gereken genişliğini belirtmek (px, pt, em gibi uzunluk birimler ile) istediğimizde flex-basis özelliğinden faydalanırız. Özellik, varsayılan olarak auto değerine sahiptir. Şayet, değer olarak 0 (sıfır) tanımı yapılırsa item içeriğindeki değer için yeterli olan genişliği alacaktır⁵.

.item:nth-of-type(2) {
  flex-basis: 10em;
}

.item:nth-of-type(3) {
  flex-basis: 3px;
}

Shorthand: Flex

flex CSS özelliği bir flex item’ın flex container ile ilişkili olarak nasıl büyüyeceğini (flex-grow) ya da küçüleceğini (flex-shrink) belirtiriz. Bu kısayol sayesinde az önce belirttiğimiz özellikleri, yani flex-grow, flex-shrink ve flex-basis özelliklerini tek bir tanım altında belirtebiliriz5.

.item:nth-of-type(2) {
  flex: 2;
}

.item:nth-of-type(3) {
  flex: 1 1 100px;
}

Align-self

Bu yazıda değineceğimiz son item özelliğimiz align-self. align-self bir flex container özelliği olan align-content ile aynı davranışı item bağlamında göstermektedir.

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

.item:nth-of-type(2) {
  align-self: flex-end;
}

.item:nth-of-type(3) {
  align-self: auto;
}

Yukarıdaki özellik tanımlarıyla ilgili işlemler yapmak için ayrıca CodePen örneğini inceleyebilir ve düzenleyebilirsiniz.