Essayons de répondre à cette question avec des points rapides plutôt que de longues explications. Il y a beaucoup de similitudes entre flexbox et grid, à commencer par le fait qu’ils sont utilisés pour la mise en page et beaucoup plus puissants que n’importe quelle technique de mise en page qui les a précédés. Ils peuvent s’étirer et rétrécir, ils peuvent centrer, réorganiser et aligner les choses…. Vous pouvez choisir l’un et l’autre pour pas mal de situation de mise en page et également beaucoup de situation ou il faudra faire un choix. Concentrons-nous sur les différences plutôt que sur les similitudes :

Différence de wrap entre Flexbox et Grid

Si nous permettons à un conteneur flex de wrapper, il continuera sur une autre rangée lorsque les articles flexibles rempliront une rangée. L’endroit où ils s’alignent sur la rangée suivante est indépendant de ce qui s’est passé sur la première rangée, ce qui permet d’obtenir un aspect de masonry.

Grid peut aussi optionnellement passer à la ligne (si nous autorisons le remplissage automatique) dans le sens où les éléments peuvent remplir une rangée et se déplacer vers la nouvelle rangée (ou se placer automatiquement), mais s’ils le font, ils tomberont sur les mêmes lignes de grille que tous les autres éléments.

Quelle est la différence entre Flexbox et Grid ?
Flexbox en haut, Grid en bas

Différence de “dimension” entre Flex et Grid

Flexbox est “unidimensionnel”

Alors que flexbox peut créer des lignes et des colonnes dans le sens où il permet aux éléments de passer à la ligne, il n’y a aucun moyen de contrôler où les éléments se terminent puisque les éléments ne font que pousser sur un seul axe et ensuite s’enrouler ou non en conséquence. Ils font ce qu’ils font, si vous voulez, le long d’un plan unidimensionnel et c’est à cause de cette dimension unique que nous pouvons optionnellement faire des choses, comme aligner des éléments sur une ligne de base – ce que la grille est incapable de faire.

.parent {
  display: flex;
  flex-flow: row wrap; /* aussi loin que possible sur une ligne, puis wrappez comme bon vous semble */
}

Grid est “bidimensionnel”

Vous pourriez considérer Grid comme “bidimensionnel” en ce sens que nous pouvons (si nous le voulons) déclarer la taille des lignes et des colonnes et ensuite placer explicitement les choses dans les deux lignes et colonnes comme nous le voulons.

.parent {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* Trois colonnes, une trois fois plus large que les autres */
  grid-template-rows: 200px auto 100px; /* Trois rangées, deux avec des largeurs explicites */
  grid-template-areas:
    "header header header"
    ". main sidebar"
    "footer . .";
}

/*
  Maintenant, nous pouvons explicitement placer les éléments dans les lignes et les colonnes définies.
*/
.child-1 {
  grid-area: header;
}

.child-2 {
  grid-area: main;
}

.child-3 {
  grid-area: sidebar;
}

.child-4 {
  grid-area: footer;
}
Quelle est la différence entre Flexbox et Grid ?
Flexbox en haut, Grid en bas

Je ne suis pas le plus grand fan de la différenciation “1D” vs. “2D” Grid vs. flexbox, car la plupart de mon utilisation quotidienne de Grid est “1D” et c’est super pour ça. Je ne voudrais pas que quelqu’un pense qu’il faut utiliser flexbox et non pas grid parce que grid est seulement quand on a besoin de 2D.

Différence de hierarchie Flex / Grid

Grid est principalement définie sur l’élément parent. En flexbox, la plus grande partie de la mise en page (au-delà de l’essentiel) se fait sur les enfants.

/*
  Les enfants flex font la plupart du travail
*/
.flexbox {
  display: flex;
  > div {
    &:nth-child(1) { // logo
      flex: 0 0 100px;
    }
    &:nth-child(2) { // search
      flex: 1;
      max-width: 500px;
    }
    &:nth-child(3) { // avatar
      flex: 0 0 50px;
      margin-left: auto;
    }
  }
}

/*
  Le parent de la grille fait la plus grande partie du travail
*/
.grid {
  display: grid;
  grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr;
  grid-template-rows: 100px repeat(3, auto) 100px;
  grid-gap: 10px;
}

La différence de chevauchement entre Flex et Grid

Grid est meilleur pour les chevauchements. Pour que les éléments se chevauchent dans Flexbox, il faut examiner des éléments traditionnels, comme les marges négatives, les transformations ou le positionnement absolu, afin de sortir du comportement du flex. Avec la grille, nous pouvons placer des éléments sur des lignes de grille qui se chevauchent, ou même directement à l’intérieur des mêmes cellules.

Différence de chevauchement entre Flex et Grid
Flexbox en haut, Grid en bas

Flexibilité & robustesse de Flex et Grid

La grille est plus robuste. Alors que la flexibilité de flexbox est parfois sa force, la façon dont un flexbox est dimensionné devient assez compliquée. C’est une combinaison de largeur, largeur minimale, largeur maximale, flex-basis, flex-base, flex-grow et flex-shrink, sans parler du contenu à l’intérieur et des choses comme les espaces ainsi que les autres éléments dans la même rangée. La grille a des caractéristiques intéressantes d’occupation de l’espace, comme les unités fractionnaires, et la capacité du contenu à briser les grilles, bien que, de façon générale, nous mettions en place des lignes de grille et y placions des éléments qui se mettent en place directement.

Flexbox peut repousser les choses. C’est une caractéristique assez unique de flexbox : vous pouvez, par exemple, mettre margin-right : auto ; sur un élément et, s’il y a de la place, cet élément repoussera tout le reste aussi loin qu’il peut aller.

Conclusion

Bien que pouvant être utilisés pour l’intégration d’une même interface, Flex et Grid n’en sont pas moins très différents avec leurs propres qualités et défaut. Choisir le bon dès le départ pourra vous éviter une grande perte de temps je peux vous l’assurer.

Si vous avez d’autre idées de différence entre ces deux propriétés, n’hésitez pas à nous en faire part dans les commentaires 😉

Catégories : html/css

1 commentaire

Siddhy · 19 février 2019 à 13 h 54 min

En bonus voici plus de ressources de la part d’autres personnes qui ont tenté d’expliquer cette différence :
* Chris Coyier: What’s the Difference Between Flexbox and Grid?
* Jen Simmons: Flexbox vs. CSS Grid — Which is Better?
* Benedikt Mix: CSS Grid vs. Flexbox —what should I use?
* Lucas Olivera: CSS Grid vs Flexbox
* Kunal Sarker: Grid vs Flexbox: Which should you choose?
* Rachel Andrew: Should I use Grid or Flexbox?
* Robin Rendle: Does CSS Grid Replace Flexbox?
* MDN: Relationship of grid layout to other layout methods
* Ayush Gupta: Beginner’s Guide To CSS Grid And Flexbox

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *