Grille d'affichage
Il y a 3 types d'affichage, définis sur l'élément parent :
- Affichage libre :
.cell-flex.cell-inline - Affichage en mosaïc :
.cell-flex.cell-columns-{1 to 4} - Affichage en liste :
.cell-flex.cell-row
Affichage libre
Chaque élément enfant est tributaire de sa propre largeur (au maximum de 100% de la largeur de l 'élément parent). Les éléments enfants s'alignent horizontalement jusqu'au maximum de la largeur du parent, puis passent à la ligne automatiquement.
.cell-inline
<div class="cell-flex cell-inline">
<article style="width: 140px">... </article>
<article style="width: 240px">... </article>
<article style="width: 340px">... </article>
<article style="width: 140px">... </article>
<article style="width: 140px">... </article>
<article style="width: 440px">... </article>
</div>Affichage en mosaïc
Les éléments enfants sans dimension ont leur largeur définie par la classe du parent.
.cell-columns-4
<div class="cell-flex cell-columns-4">
<article>... </article>
<article>... </article>
<article>... </article>
<article>... </article>
</div>.cell-columns-3
<div class="cell-flex cell-columns-3">
<article>... </article>
<article>... </article>
<article>... </article>
<article>... </article>
</div>.cell-columns-2
<div class="cell-flex cell-columns-2">
<article>... </article>
<article>... </article>
<article>... </article>
<article>... </article>
</div>Affichage en liste
Quelles que soient leur largeur, les éléments enfants sont affichés les uns en dessous des autres. S'ils n'ont pas de largeur définie, il prendront 100% de la largeur du parent.
.cell-row
<div class="cell-flex cell-inline">
<article>... </article>
<article>... </article>
<article style="width: 25%">... </article>
<article style="width: 60%">... </article>
</div>Affichage forcé
Quel que soit le type d'affichage de l'élément parent, on peut forcer la largeur de chaque enfant et des classes prédéfinies sont disponibles. (Pour les écrans > 1024px)
<div class="cell-flex ...">
<article class="cell-100">... </article>
<article class="cell-1-2">... </article>
<article class="cell-1-2">... </article>
<article class="cell-1-4">... </article>
<article class="cell-1-3">... </article>
<article class="cell-2-3">... </article>
<article class="cell-1-4">... </article>
<article class="cell-3-4">... </article>
</div>
