Item Flow Bölüm 1: CSS için yeni web düzeni yapılandırma yöntemi

Arka plan

Zaman içinde Flexbox ve Grid düzenleri yalnızca CSS ile mümkün hale geldi,
ancak Masonry düzeni için hâlâ JavaScript desteğine ihtiyaç duyuluyordu. Bu düzen nedeniyle tarayıcılar arasında çeşitli tartışmalar yaşandı. Chrome yeni bir düzen uyguladı (display: masonry), Firefox ve Safari ise grid-template-*: collapse ayarlama yöntemiyle bunu uyguladı.

Ancak biri mevcut yaklaşımlardan oldukça farklı bir öneri ortaya koydu. Öneri, Masonry, Grid ve Flexbox düzenlerini tek bir yapıda birleştirmekti.

Flexbox ve Grid akışını tek yapıda birleştirmek

Mevcut durumda iç öğelerin akışını ayarlama yöntemi her düzen için farklıydı.

.container {  
    /* Flexbox */  
    flex-direction: row | row-reverse | column | column-reverse;  
    flex-wrap: nowrap | wrap | wrap-reverse;  
    /* flex-direction + flex-wrap */  
    flex-flow: <flex-direction> <flex-wrap>;  
  
    /* Grid */  
    grid-auto-flow: row | column | dense;  
}  

Bu işlevlerin aşağıdaki özellikler altında birleştirilmesi planlanıyor.

• item-direction
• item-wrap
• item-pack
• item-slack

item-direction

İç öğelerin hangi yönde akacağını tanımlar. flex-direction ve grid-auto-flow özelliklerinin yerini alır.

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

item-wrap

İç öğeler listelenirken bir satır taştığında davranışı ve yönü tanımlar. flex-wrap özelliğinin yerini alır.

.container {  
    item-wrap: auto || [[nowrap | wrap] | [normal | reverse]];  
}  

Grid düzeni varsayılan olarak wrap davranışını kullanır; ancak item-wrap: nowrap olarak ayarlanırsa tüm öğeler yalnızca tek satırda dizilir ve genişlikleri de aynı olan bir düzen oluşturulabilir.

item-pack

İç öğelerin nasıl yerleştirileceğini tanımlar. grid-auto-flow: dense özelliğinin yerini alır.

.container {  
    item-pack: normal | dense;  
}  

Flexbox düzeninde bu özellik yoktu; ancak item-pack: dense ile artık Grid'dekiyle aynı şekilde yerleştirme yapılabilir. Örneğin, mevcut wrap özelliği ayarlı bir Flexbox'ta öğeler yerleştirilirken bir satırdaki boş alan öğenin genişliğinden küçükse doğrudan sonraki satıra geçiliyordu. Bundan sonra ise önceki satırlarda o öğenin sığabileceği bir alan varsa, önce oraya yerleştirecek şekilde uygulanabilir.

Ayrıca daha önce olmayan yeni yöntemler de eklenebilir.

• item-pack: balance: text-wrap: balance gibi, her satırdaki öğe sayısını diğer satırlarla benzer hale getirebilir.
• item-pack: collapse: nihai hedef olan Masonry düzenini kolayca uygulayabilir.

item-slack

İç öğeler yerleştirilirken her satırda en az ne kadar boş alan bırakılacağını ayarlayan özelliktir. Daha önce önerilmiş grid-slack ve masonry-slack özelliklerinin yerini alır. item-slack adı hâlâ tartışma aşamasındadır. (Şu an için flow-tolerance olarak kesinleşmiştir.)

Hepsini bir araya getirmek

Artık aşağı doğru sıralanan bir Flexbox oluştururken şöyle ayarlamak yeterli olacak.

.container {  
    display: flex;  
    item-direction: column;  
    item-wrap: nowrap;  
}  

Daha kısa bir yöntem de gelecek.

.container {  
    display: flex;  
    item-flow: column nowrap;  
}  

Bu özelliğin adı ve çalışma biçimi hâlâ tartışılıyor.

---

Şu anda Masonry düzeni display: grid-lanes olarak değiştirildi. Ancak item-* özellikleri hâlâ olumlu şekilde tartışılıyor.

• Unifying grid-auto-flow and flex-flow(item-flow ile ilgili tartışma)
• Decide on a name for item-slack(flow-tolerance olarak kesinleşti)
• Brick by brick: Help us build CSS Masonry
• CSS Grid Lanes

Kişisel olarak, tek yapıda birleştiğinde display: flex veya grid de atlanabilse güzel olurdu.