Comment maitriser parfaitement le positionnement dans un conteneur.
Centrer horizontalement et verticalement des éléments dans la page
Les bases de compréhension
Il est important de comprendre la notion d’axe principal et d’axe secondaire.
SI flex-direction : rows, l’axe principal est une ligne, sinon c’est une colonne.
Concrêtement
- Faire un container et ses enfants dans le DOM
- Ecrire les css du container (c’est le parent)
- taille width et height (100% en largeur et 100vh en hauteur pour le plein écran)
- display: flex;
- flex-direction : row ou colonne => axe principal
- justify-content : … => alignement de l’axe principal
- align-items : … => alignement de l’axe secondaire
- Ecrire les css des enfants
- flex : 1 ; => rend fluide les enfants (largeur = width / nb elements)
- Gérer éventuellement les exceptions sur un enfant
- flex : 2 ; => espace 2 fois + grand (largeur = (width / nb elements)*2 )
- align-self => Alignement sur l’axe secondaire
- flex-basis => taille fixe (en pixels par défaut)
- flex-grow:0 => ne remplit pas l’espace restant
- flex-grow:1 => remplit l’espace restant
- flex-shrink => idem grow mais pour le rétrécissement de l’espace restant
- flex : grow shrink basis => Raccourcis
Essayez !
Les éléments « HELLO » sont espacés uniformément sur l’axe horizontal et centrés verticalement.
See the Pen FlexBox 001 by Jerome Mercier (@jmercier) on CodePen.0
HTML
Le HTML comprend un `body` contenant une `div` avec l’identifiant `container`. À l’intérieur du `container`, il y a trois éléments `div`, chacun contenant le texte « HELLO ».
CSS
Le CSS commence par l’importation d’une police Google (`Karla`). Ensuite, un style global (`*`) est appliqué pour annuler les marges (`margin:0`), les paddings (`padding:0`) et définir la propriété `box-sizing` sur `border-box`.
Le `body` utilise la police `Karla` et a un fond de couleur `#1e2733` (un bleu foncé/gris). Les `ul` sont stylisés pour ne pas avoir de style de liste (`list-style:none`) et les `a` pour ne pas avoir de décoration de texte. Le `#container` est conçu pour utiliser Flexbox. Il est réglé pour afficher ses enfants en ligne (`flex-direction:row`), justifier le contenu de manière égale (`justify-content:space-around`), et aligner les éléments au centre (`align-items:center`). Il occupe 100% de la largeur et toute la hauteur de la fenêtre (`height:100vh`). Chaque `div` à l’intérieur du `container` a un fond `#4c78ad` (bleu), un padding de `20px`, et une couleur de texte `#bfcfe3` (bleu clair/gris).
Les enjeux créatifs
Le positionnement en CSS est une des pierres angulaires du développement front-end, crucial pour créer des mises en page précises et réactives. Historiquement, les développeurs ont dû jongler avec diverses techniques – flottants (float), positionnement absolu ou relatif, des tables de mise en page – pour agencer les éléments de manière souhaitée, et même des images transparentes! Ces méthodes, toutefois, présentaient des limites significatives, notamment en termes de complexité et de flexibilité, surtout lorsqu’il s’agissait de créer des designs réactifs et dynamiques.
L’introduction de Flexbox (Flexible Box Layout) a marqué un tournant dans la manière dont les développeurs abordent le positionnement en CSS.
Flexbox offre une solution plus efficace et intuitive pour agencer les éléments dans un conteneur, permettant un alignement, une distribution de l’espace et une redimension automatique des éléments enfants de façon plus contrôlable et prévisible. Cette fonctionnalité est particulièrement précieuse dans le cadre du codage créatif, où les développeurs cherchent à créer des expériences utilisateurs innovantes et interactives.
Avec Flexbox, il est beaucoup plus simple de développer des mises en page qui s’adaptent à différentes tailles d’écran, orientations et résolutions, permettant ainsi une plus grande créativité et flexibilité dans la conception web.
En résumé, Flexbox n’est pas seulement un outil de positionnement, mais un catalyseur pour la création de designs web modernes, interactifs et adaptatifs.