Flex Grid
Grille utilisant le layout CSS display: flex et flex-wrap: wrap.
Cette grille remplace les trios table grid, inline grid et float grid
dans le cas où votre projet peut limiter son support à IE10+
La class fx-grid initie le layout flexbox en multiligne par défault (flex-wrap: wrap) avec gouttières.
Elle est prévue pour fonctionner en flex-direction: row.
Vous pouvez la combiner avec les flex utils class.
Exemples
Grille auto
lorsque aucune option ni largeur de colonne ne sont définies.
- item 1 est long
- item 2
- item 3
En combinaison avec les flex-utils class
- item 1 est long
- item 2
- item 3
- item 1 est long
- item 2
- item 3
- item 1 est long
- item 2
- item 3
Avec largeur de spans définies et flex-utils class --alignI-center et i__fx--end
Lorem ipsum Et laborum nisi mollit quis sed.
Lorem ipsum Tempor ea occaecat dolor veniam officia incididunt nulla fugiat esse esse Excepteur nulla dolor exercitation anim eu nisi dolore irure ad anim aliqua quis consectetur reprehenderit in Duis mollit ut sint adipisicing irure dolore eu ut cupidatat.
Lorem ipsum Quis reprehenderit consequat aliqua laboris sint dolor nisi dolore occaecat esse cillum enim minim adipisicing non aliqua eiusmod incididunt.
Lorem ipsum Tempor ea occaecat dolor veniam officia incididunt nulla fugiat esse esse Excepteur nulla dolor exercitation anim eu nisi dolore irure ad anim aliqua quis consectetur reprehenderit in Duis mollit ut sint adipisicing irure dolore eu ut cupidatat.
Lorem ipsum Et laborum nisi mollit quis sed.
Sans gouttière
Grilles imbriqués avec demi-gouttières
RWD: modification des tailles de colonnes en fonction des breakpoints
Utilisation volontaire d'un nombre impaire d'items dans une grille 4 colonnes
pour tester un alignement centré du dernier item à l'aide de l'option --justify-center