Item Flow, parte 1: a nova forma de configurar a estrutura da web no CSS

Contexto

Com o passar do tempo, os layouts com Flexbox e Grid passaram a ser possíveis apenas com CSS, mas o layout Masonry ainda precisava contar com a ajuda do JavaScript. Por causa desse layout, várias discussões entre navegadores continuaram acontecendo. O Chrome implementou um novo layout (display: masonry), enquanto Firefox e Safari o implementaram por meio da configuração de grid-template-*: collapse.

No entanto, alguém apresentou uma abordagem bem diferente da existente. A ideia era unificar os layouts Masonry, Grid e Flexbox em um só.

Unificando o fluxo de Flexbox e Grid

Até agora, a forma de definir o fluxo dos elementos internos variava de acordo com cada layout.

.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;  
}  

Essa funcionalidade deve ser unificada nos recursos abaixo.

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

item-direction

Define a direção em que os elementos internos fluem. Substitui as propriedades flex-direction e grid-auto-flow.

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

item-wrap

Ao dispor os elementos internos, define o comportamento e a direção quando uma linha ultrapassa o limite. Substitui a propriedade flex-wrap.

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

Nos layouts Grid, o padrão é o modo wrap, mas se for definido item-wrap: nowrap, todos os elementos ficam dispostos em apenas uma linha, permitindo criar um layout em que até a largura seja igual.

item-pack

Define a forma de empilhar os elementos internos. Substitui a propriedade grid-auto-flow: dense.

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

No Flexbox isso não existia, mas com o surgimento de item-pack: dense, passa a ser possível empilhar da mesma forma que no Grid. Por exemplo, no Flexbox tradicional com wrap, durante o empilhamento dos elementos, se o espaço restante em uma linha fosse menor que a largura do elemento, ele necessariamente iria para a próxima linha. Daqui em diante, se houver espaço na linha anterior onde esse elemento caiba, será possível colocá-lo ali primeiro.

Além disso, também podem ser adicionados novos modos que antes não existiam.

• item-pack: balance: como em text-wrap: balance, permite ajustar a quantidade de elementos em cada linha para ficar semelhante à das outras linhas.
• item-pack: collapse: permite implementar com facilidade o layout Masonry, que é o objetivo final.

item-slack

É a propriedade que define o tamanho mínimo do espaço livre que deve permanecer em cada linha ao empilhar elementos internos. Substitui as propriedades propostas anteriormente, grid-slack e masonry-slack. O nome item-slack ainda está em discussão. (Nota do tradutor: atualmente foi definido como flow-tolerance.)

Juntando tudo

Agora, para criar um Flexbox disposto verticalmente, basta configurar assim.

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

Também deve surgir uma forma mais curta.

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

O nome dessa propriedade e seu funcionamento ainda estão em discussão.

---

Atualmente, o layout Masonry foi alterado para display: grid-lanes. No entanto, as propriedades item-* ainda estão sendo discutidas de forma positiva.

• Unifying grid-auto-flow and flex-flow(discussão relacionada a item-flow)
• Decide on a name for item-slack(definido como flow-tolerance)
• Brick by brick: Help us build CSS Masonry
• CSS Grid Lanes

Pessoalmente, acho que seria bom se, ao unificar tudo, também fosse possível omitir display: flex ou grid.