Un conteneur, des éléments
Le principe de la mise en page avec Flexbox est simple: vous définissez un conteneur, et à l'intérieur vous placez plusieurs éléments.
Sur une même page web, vous pouvez sans problème avoir plusieurs conteneurs.
Voici comment ça fonctionne:
Le conteneur est une balise HTML, et les éléments sont d'autres balises HTML à l'intérieur:
Si je mets une bordure au conteneur, une taille et une couleur de fond aux éléments, on va vite voir comment ils s'organisent :
Rien de bien nouveau, c'est le comportement normal dont nous avons l'habitude.
Attention!! Je vous montre un peu plus tard comment attribuer une couleur et une bordure différente aux éléments avec la pseudo-classe:nth-child.
Pour l'instant, j'ai mis de la couleur sur chacun des éléments pour que vous puissiez les distinguer facilement dans mon exemple !
Soyez flex !
Si je mets en pratique la propriété flex, comme ceci:
...alors les éléments se mettront côte à côte par défaut, comme ceci:
La direction
Flexbox nous permet d'agencer ces éléments dans le sens que l'on veut. Avec flex-direction, on peut les positionner verticalement ou encore les inverser. Il peut prendre les valeurs suivantes:
- row: organisés sur une ligne (par défaut)
- column: organisés sur une colonne
- row-reverse: organisés sur une ligne en ordre inversé
- column-reverse: organisés sur une colonne en ordre inversé
Par exemple:
On se rend compte que c'est comme au début, donc pour savoir si c'est vraiment efficace, on va essayer dans l'ordre inverse:
Le retour à la ligne
Par défaut, les blocs essaient de rester sur la même ligne s'ils n'ont pas la place (ce qui peut provoquer des bugs de design parfois).
Si vous voulez, vous pouvez demander à ce que les blocs aillent à la ligne lorsqu'ils n'ont plus la place avec flex-wrap qui peut prendre ces valeurs:
- nowrap: pas de retour à la ligne (par défaut)
- wrap: les éléments vont à la ligne lorsqu'il n'y a plus la place
- wrap-reverse: les éléments vont à la ligne lorsqu'il n'y a plus la place en sens inverse
Par exemple:
Alignez-les !
Par défaut, les éléments seront organisés horizontalement, mais ils peuvent l'être également verticalement, c'est ce qu'on appelle l'axe principal.
Les axes sont définis en fonction de l'organisation des éléments:
- s'ils sont horizontaux, l'axe secondaire sera vertical,
- s'ils sont verticaux, l'axe secondaire sera donc horizontal.
Aligner sur l'axe principal
On va partir du principe que les éléments sont horizontaux.
Pour changer leur alignement, on va utiliser justify-content +
- flex-start: alignés au début (par défaut)
- flex-end: alignés à la fin
- center: alignés au centre
- space-between: étirés sur tout l'axe (il y a de l'espace entre eux)
- space-around: étirés sur tout l'axe, mais avec de l'espace aux extrémités
Par exemple:
Le mieux est encore de tester toutes les valeurs possibles pour voir ce que ça donne, vous ne pensez pas ?
Maintenant, voici ce qu'il faut bien comprendre : ça marche aussi si vos éléments sont dans une direction verticale.
Dans ce cas, l'axe vertical devient l'axe principal, et justify-content s'applique aussi:
Aligner sur l'axe secondaire
En ce qui concerne l'axe secondaire, on va utiliser la propriété align-items +
- stretch: les éléments sont étirés sur tout l'axe (valeur par défaut)
- flex-start: alignés au début
- flex-end: alignés à la fin
- center: alignés au centre
- baseline: alignés sur la ligne de base (semblable à flex-start)
Pour les exemples qui vont suivre, on part du principe que les éléments sont disposés de manière horizontale, mais c'est possible de l'adapter à la disposition verticale.
de centrer complètement l'élément dans le conteneur !
À savoir!! Pour le centrage vertical et horizontal, une méthode encore plus simple existe, c'est dire que le conteneur est en fait une flexbox pour lui approprier des marges automatiques au niveau des éléments intérieurs, comme ceci:
Aligner un seul élément
Il est possible de faire une exception pour un seul des éléments sur l'axe secondaire avec align-self:
Ce qui donne:
Tiens je crois que j'ai dessiné une tête en pixel art !
Répartir plusieurs lignes
Pour choisir comment répartir plusieurs lignes, on utilise la propriété align-content, qui sera inefficace dans le cas où il n'y a qu'une seule ligne.
Voici un exemple:
On précise aux éléments de retourner à la ligne avec flex-wrap :
Jusque-là, rien de vraiment nouveau.
Voyons voir comment les lignes se répartissent différemment avec la nouvelle propriété align-content que je voulais vous présenter.
Elle peut prendre ces valeurs:
- flex-start: les éléments sont placés au début
- flex-end: placés à la fin
- center: placés au centre
- space-between: séparés avec de l'espace entre eux
- space-around: idem, mais il y a aussi de l'espace au début et à la fin
- stretch: par défaut, s'étirent pour occuper tout l'espace
Voici ce que donnent les différentes valeurs:
Rappel à l'ordre
Pour modifier l'ordre des éléments sans toucher au code html, on peut utiliser la propriété CSS order.
Dans ce cas, on va indiquer un nombre, ainsi les éléments seront triés du plus petit au plus grand.
Reprenons une simple ligne de 3 éléments:
Voyons voir si je dis que le 1er élément sera placé en 3ème, que le 2nd sera placé en 1er, et que le 3ème sera placé en 2ème:
Encore plus flex : faire grossir ou maigrir les éléments
Pour qu'un élément prenne tout l'espace restant, on va utiliser la propriété flex.
Le nombre indiqué à la propriété flex définit dans quelle mesure il peut grossir par rapport aux autres.
Ici, le premier élément peut grossir 2 fois plus que le second élément :
À savoir!! La propriété flex est une super-propriété qui rassemble flex-grow (capacité à grossir), flex-shrink (capacité à maigrir) et flex-basis (taille par défaut).