Item Flow, parte 1: la nueva forma de configurar la estructura web en CSS

Contexto

Con el paso del tiempo, los layouts con Flexbox y Grid llegaron a ser posibles solo con CSS, pero el layout Masonry todavía requería apoyarse en JavaScript. Este layout dio pie a varios debates entre navegadores. Chrome implementó un nuevo layout (display: masonry), mientras que Firefox y Safari lo implementaron mediante la configuración de grid-template-*: collapse.

Sin embargo, alguien propuso una alternativa muy distinta a lo existente. La idea era unificar en uno solo los layouts Masonry, Grid y Flexbox.

Unificar el flujo de Flexbox y Grid

Hasta ahora, la manera de configurar el flujo de los elementos internos era distinta en 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;  
}  

Está previsto que esta funcionalidad se unifique en las siguientes propiedades.

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

item-direction

Define la dirección en la que fluyen los elementos internos. Sustituye a las propiedades flex-direction y grid-auto-flow.

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

item-wrap

Define el comportamiento y la dirección cuando, al acomodar los elementos internos, una línea se desborda. Sustituye a la propiedad flex-wrap.

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

En Grid, el comportamiento predeterminado es wrap, pero si se configura item-wrap: nowrap, todos los elementos se acomodan en una sola línea y se puede crear un layout donde incluso el ancho sea idéntico.

item-pack

Define la forma en que se apilan los elementos internos. Sustituye a la propiedad grid-auto-flow: dense.

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

Aunque Flexbox no tenía algo así, con la incorporación de item-pack: dense ahora puede apilar elementos del mismo modo que Grid. Por ejemplo, si antes un Flexbox con wrap colocaba siempre un elemento en la siguiente línea cuando el espacio restante en una línea era menor que el ancho del elemento, a partir de ahora podrá implementarse de forma que, si en una línea anterior hay espacio suficiente para ese elemento, se coloque primero allí.

Además, también se pueden añadir modos nuevos que antes no existían.

• item-pack: balance: como en text-wrap: balance, permite ajustar la cantidad de elementos en cada línea para que sea similar entre líneas.
• item-pack: collapse: permite implementar fácilmente el layout Masonry, que es el objetivo final.

item-slack

Es una propiedad para definir la cantidad mínima de espacio libre que debe dejarse en cada línea al apilar los elementos internos. Sustituye a las propiedades propuestas anteriormente grid-slack y masonry-slack. El nombre item-slack todavía está en discusión.

Reunirlo todo

Ahora, para crear un Flexbox que se liste hacia abajo, bastará con configurarlo así.

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

También está prevista una forma más corta.

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

El nombre y el funcionamiento de esta propiedad siguen en discusión.

---

Actualmente, el layout Masonry cambió a display: grid-lanes. Sin embargo, las propiedades item-* todavía se siguen discutiendo de manera positiva.

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

Personalmente, me gustaría que al unificar todo también se pudiera omitir display: flex o grid.