Les Flexboxs
Pour la mise en page d’un site, les développeurs ont connu plusieurs méthodes :
- l’utilisation de tableau en HTML
- Puis le CSS a pris la place dans les années 2000 et on utilisait les propriétés « float » ou « inline-block ».
Ces méthodes ont désormais largement fait la place à ce qu’on appelle maintenant « les Flexbox ».
Flexbox : qu’est-ce que ca veut dire?
Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l’espace entre des objets d’une interface ainsi que de les aligner.
https://developer.mozilla.org/
Oui, mais concrètement?
Très simple d’utilisation, les flexboxs permettent de définir un conteneur principal et des éléments à l’intérieur. Puis, à l’aide de différentes propriétés, nous allons pouvoir organiser comme on le souhaite ces différents éléments.
La propriété qui change tout est la propriété « display : flex », qui va alors permettre de gérer les éléments en ligne. Si on souhaite les gérer en colonne, il faudra ajouter la propriété : « flex-direction : column. C’est ainsi que l’on va définir notre axe principal.
Pour aligner les éléments sur ce premier axe, on pourra utiliser la propriété « justify-content ».
Une fois définis notre axe principal, on va jouer sur l’axe secondaire pour placer chaque élément exactement où l’on souhaite. Et ce, grâce à l’aide de différentes propriétés comme :
- align-items : gérer l’alignements des éléments sur l’axe secondaire.
- align-self : aligner un seul élément.
- align-content : répartir sur plusieurs lignes.
- order : modifier l’ordre des éléments (sans toucher au code HTML).
- margin : permet de gérer le positionnement de l’élément, voir même de le centrer directement horizontalement et verticalement avec un simple « margin:auto ».
- flex-wrap : autoriser les éléments à aller à la ligne.
- flex : agrandir ou réduire un élément.
Ci-dessous deux exemples permettant de mieux comprendre comment on peut organiser et gérer les éléments, et quelles sont les possibilités :
En conclusion :
En résumé les flexboxs ont rendu obsolète toutes les autres méthodes de mise en page grâce à leur simplicité d’utilisation et aux possibilités qu’elles offrent. Par conséquent, lors de la création d’un nouveau site internet, il est fortement recommandé d’utiliser cette méthode.
Dernier avantage, le module Flexbox est très bien reconnu sur tous les navigateurs internet.
Source :
https://www.alsacreations.com/
