Item Flow, 1re partie : une nouvelle façon de définir la structure web en CSS

Contexte

Au fil du temps, les mises en page Flexbox et Grid sont devenues possibles uniquement avec CSS, mais la mise en page Masonry nécessitait encore l’aide de JavaScript. Cette mise en page a d’ailleurs suscité plusieurs discussions entre navigateurs. Chrome a implémenté une nouvelle mise en page (display: masonry), tandis que Firefox et Safari l’ont implémentée via un réglage de grid-template-*: collapse.

Mais quelqu’un a proposé une approche très différente de l’existant. L’idée était d’unifier en un seul ensemble les mises en page Masonry, Grid et Flexbox.

Unifier le flux de Flexbox et Grid

Jusqu’ici, la manière de définir le flux des éléments internes différait selon chaque type de mise en page.

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

Cette fonctionnalité devrait être unifiée sous les éléments suivants.

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

item-direction

Définit la direction dans laquelle les éléments internes s’écoulent. Cette propriété remplace flex-direction et grid-auto-flow.

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

item-wrap

Définit le comportement et la direction lorsqu’une ligne déborde au moment d’aligner les éléments internes. Cette propriété remplace flex-wrap.

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

Par défaut, une mise en page Grid fonctionne en mode wrap, mais si l’on définit item-wrap: nowrap, tous les éléments sont alignés sur une seule ligne, ce qui permet aussi de créer une mise en page avec des largeurs identiques.

item-pack

Définit la manière d’empiler les éléments internes. Cette propriété remplace grid-auto-flow: dense.

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

Flexbox ne disposait pas de cette possibilité, mais avec l’ajout de item-pack: dense, il devient possible d’empiler les éléments de la même manière que dans Grid. Par exemple, avec un Flexbox configuré avec wrap, si l’espace restant sur une ligne était plus petit que la largeur de l’élément, on passait jusqu’ici automatiquement à la ligne suivante. Désormais, s’il existe sur une ligne précédente un espace où cet élément peut entrer, il pourra d’abord y être placé.

Il devient également possible d’ajouter de nouveaux modes qui n’existaient pas auparavant.

• item-pack: balance : à l’image de text-wrap: balance, permet d’ajuster le nombre d’éléments sur chaque ligne pour qu’il soit similaire d’une ligne à l’autre.
• item-pack: collapse : permet d’implémenter facilement l’objectif final, à savoir la mise en page Masonry.

item-slack

Il s’agit d’une propriété qui définit la taille minimale de l’espace libre à laisser sur chaque ligne lors de l’empilement des éléments internes. Elle remplace les propriétés proposées auparavant, grid-slack et masonry-slack. Le nom item-slack est encore en discussion. (Note du traducteur : il a désormais été fixé à flow-tolerance.)

Regrouper le tout

Désormais, pour créer un Flexbox empilé verticalement, il suffit de le configurer ainsi.

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

Une forme plus courte est également prévue.

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

Le nom de cette propriété et son fonctionnement font encore l’objet de discussions.

---

La mise en page Masonry a maintenant été renommée en display: grid-lanes. En revanche, les propriétés item-* continuent d’être discutées de manière positive.

• Unifying grid-auto-flow and flex-flow(discussion liée à item-flow)
• Decide on a name for item-slack(désormais fixé à flow-tolerance)
• Brick by brick: Help us build CSS Masonry
• CSS Grid Lanes

Personnellement, j’aimerais aussi qu’en unifiant tout cela, on puisse omettre display: flex ou grid.