comprendre-les-flex-box-et-les-grilles-css

comprendre-les-flex-box-et-les-grilles-css

Introduction

Avant l’arrivée du flexbox et des grilles en CSS, les développeurs utilisaient les tables et la propriété float pour aligner les éléments. Néanmoins, ces pratiques ont des limites sur des alignements un peu avancés. Et c’est là que nos deux supers Héro (flexbox et css grid) entrent en jeu !

Flexbox :

A quoi sert-il?

Supposons que vous avez une div de class .container qui contient 3 items, c’est facile de centrer cet élément, il suffit juste de lui donner un width et une margin: 0 auto et c’est fait !

Mais cette div a des items et le fait de centrer le .container ne veut pas dire que les items vont aussi être centrés ! Comment centrer les éléments enfants (items) de notre .container ? C’est là que se trouve l’utilité du Flexbox.

Il va nous permettre de gérer l’alignement des items dans une seule direction à la fois suivant l’axe Principal (Justify-content) ou l’axe secondaire (align-items).

-L’axe Principal: C’est l’axe horizontal (de gauche à droite)

-L’axe secondaire : C’est l’axe vertical (De haut en bas)

NB : L’axe secondaire ne fonctionnera jamais si le .container n’a pas de hauteur (height) définie !

Pour utiliser le Flexbox, on doit utiliser la propriété display de CSS :

.container

{

display: flex;

}

A partir de là, on peut commencer à utiliser les différentes propriétés du Flexbox.

Ici on va présenter les plus utilisés: justify-content , align-items et flex-direction .

.container{

display: flex;

justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;

align-items: stretch | flex-start | center | flex-end | baseline;

flex-direction: row | column ;

}

La valeur par défaut de justify-content est flex-start , celle de align-items est stretch et pour flex-direction , row .

Alors pour centrer maintenant nos elements c’est à dire la div de notre item, nous allons utilisé cette fois-ci : align-items et on va lui donner la propriété center

Il est important de souligner que dans tous ces cas, le flex-direction est à row et ce n’était pas la peine de l’écrire car le navigateur le sait.

ATTENTION : Lorsque le flex-direction est changé à column , la direction des axes va aussi changer. C’est-à-dire que l’axe principal va prendre la place de l’axe secondaire et vice  versa. Dans ce cas, pour aligner les items horizontalement on utilise align-items, justify-content pour l’alignement vertical

Grilles CSS

Contrairement au Flexbox, le Grid fonctionne sur deux dimensions à la fois. Il utilise des colonnes (columns) et des lignes(rows) pour fonctionner. Grâce à cela, on peut faire des layouts très complexes et gérer la responsivité de manière assez fluide . A partir du Grid, on peut déjà avoir un aperçu de notre site. C’est la Magie !

Pour l’utiliser, on se sert encore de la propriété display de CSS.

.container{

display: grid;

}

On définit le nombre de colonnes et de lignes grâce au proprietes grid-template-columns et grid-template-rows.

Maintenant, nous allons voir un cas pratique avec la creation, d’un sidebar, header, footer et le main qui sera le contenu de notre site web.

Déjà on voit un système de grille sur cette illustration, 4  colonnes et 4 lignes.

Maintenant la question est comment ça? Comment est-ce que j’ai pu déterminer le nombre de colonnes ainsi que le nombre de lignes ?

Pour les colonnes, on l’a juste déterminé à partir du sidebar, Item 1, Item 2 et Item 3.

Petite precision: je precise qu’ils ne sont pas les seuls à constituer les colonnes, on se base juste sur eux pour les determiner !

Pour les lignes, à partir de Navbar, (sidebar,main), (sidebar,Item 1, Item 2, Item 3)  et (sidebar, Footer).

ICI C’EST EUX LES LIGNES !

Ehhh oui (sidebar,Item 1, Item 2, Item 3) sont tous sur la même ligne. C’est comme sur la première image ou : -header occupe toute la première ligne, main et sidebar sur la deuxième.

-footer sur la troisième

Comme vous le constater, trois nouvelles propriétés entre jeux:

grid-template-areas

– grid-area

Ces deux vont de pairs, le premier doit être utilisé sur le parent et le deuxième sur ces elément enfants.

grid-gap: C’est le shortland de -grid-column-gap et grid-row-gap. Il définit les marges extérieures entre les colonnes et les marges extérieures entre les lignes.

Responsivité :

On change juste le nombre de colonnes en Une seule(1fr), le nombre de lignes en sept(avec des tailles différentes) et aussi ne pas oublier de changer la disposition du -grid-template-areas. Quant au -grid-area, il n’est pas nécessaire de le modifier car ça reste toujours les mêmes éléments.

voici le résultat :

Pour aller plus loin avec les grilles CSS vous pouvez essayer les propriétés suivantes:

  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-start
  • grid-row
  • grid-row-end
  • grid-row-start
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows
  • justify-content
  • order
  • row-gap
Share on Facebook Share on twitter
Related Posts
Leave a Reply

Your email address will not be published.Required fields are marked *