• 15 hours
  • Easy

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

Got it!

Last updated on 11/4/24

Faites votre mise en page avec Flexbox

Comprenez la logique : un conteneur, des éléments

Pour faire de la mise en page avec Flexbox, il faut :

  1. Définir un conteneur.

  2. Et placer à l'intérieur plusieurs éléments.

Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le principe !

Sur une même page web, vous pouvez avoir plusieurs conteneurs (plusieurs cartons, si vous préférez). Vous pouvez en créer autant que nécessaire pour obtenir la mise en page que vous voulez.

Commençons par étudier le fonctionnement d'un carton (euh pardon, d'un conteneur).

<div class="container">
<div class="element element1">Élément 1</div>
<div class="element element2">Élément 2</div>
<div class="element element3">Élément 3</div>
</div>

Mais si je fais ça, par défaut, mes éléments vont se mettre les uns en dessous des autres, non ? Ce sont des blocs, après tout !

Oui, tout à fait, c'est le comportement normal dont nous avons l'habitude. Découvrons donc maintenant l'intérêt de Flexbox !

Alignez les éléments d'un conteneur avec  display: flex; 

Il suffit d'une seule propriété CSS, et tout change ! Cette propriété, c'est flex  et on l'applique au conteneur :

.container {
    display: flex;
}

... alors les blocs se placent par défaut côte à côte. Magique !

Pour visualiser le résultat, on a donné différentes couleurs à des éléments de forme rectangulaire. En code, ils ont été placés dans un conteneur ; la propriété display avec la valeur flex collent les éléments de gauche à droite.

Donnez leur une direction avec la propriété  flex-direction

Flexbox 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. Cette propriété CSS 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, mais en ordre inversé ;

  • column-reverse  : organisés sur une colonne, mais en ordre inversé.

Ici, on fait simplement :

.container {
    display: flex;
    flex-direction: column;
}

Ce qui donne :

On voit les éléments du conteneur, qui prennent la forme de rectangles de couleurs.  Avec la propriété flex-direction: column; les éléments se placent en colonne, du haut vers le bas.
Les éléments du conteneur sont disposés en colonne

Mais mais... c'est pareil qu'au début, non ? On avait ce résultat sans Flexbox, après tout !

C'est vrai. Mais maintenant que nos éléments sont flex, ils ont tout un tas d'autres propriétés utiles que nous allons voir juste après, on va y revenir.

Essayez aussi de tester l'ordre inversé, pour voir :

.container {
    display: flex;
    flex-direction: column-reverse;
}

Et voilà ce que ça donne :

On voit les éléments du conteneur, qui prennent la forme de rectangles de couleurs.  Avec la propriété flex-direction: column-reverse; les éléments se placent en colonne, du bas vers le haut.
Les éléments sont en colonne... dans l'ordre inverse !

Regardez bien la différence : les blocs sont maintenant dans l'ordre inverse ! Je n'ai pas du tout changé le code HTML, qui reste le même depuis le début.

Retournez à la ligne avec la propriété  flex-wrap

Par défaut, les blocs essaient de rester sur la même ligne s'ils n'ont pas la place, quitte à "s'écraser",  et provoquer parfois des anomalies dans la mise en page (certains éléments pouvant dépasser de leur conteneur). Si vous voulez, vous pouvez demander à ce que les blocs aillent à la ligne lorsqu'ils n'ont plus la place, avec flex-wrap.

Voilà les différentes valeurs de flex-wrap :

  1. nowrap  : pas de retour à la ligne (par défaut) ;

  2. wrap  : les éléments vont à la ligne lorsqu'il n'y a plus la place ;

  3. wrap-reverse  : les éléments vont à la ligne, lorsqu'il n'y a plus la place, en sens inverse.

.container {
    display: flex;
    flex-wrap: nowrap; 
    /* OU wrap;
    OU wrap-reverse; */
}

Dans les illustrations suivantes, vous pouvez voir les différents comportements de nos blocs en fonction de la valeur que l'on attribue à  flex-wrap  : 

Avec  flex-wrap: nowrap;  :
On voit que les éléments du conteneur (les rectangles de couleurs) sont plus étroits afin de pouvoir tenir tous sur la même ligne. Pour tenir sur la même ligne, ils ne peuvent garder leur taille originale, leur largeur a donc rétréci.
Les éléments se serrent pour tenir sur la même ligne
Avec  flex-wrap: wrap;  :
On voit que les éléments du conteneur (les rectangles de couleurs) sont à leur taille habituelle, et que, puisque leur nombre est trop grand pour être tous sur la même ligne, les rectangles reviennent à la ligne, en partant de la gauche.
Les éléments passent à la ligne s'ils ne rentrent pas tous sur la même ligne
Avec  flex-wrap: wrap-reverse;  :
Les éléments du conteneur sont à leur taille habituelle, et donc reviennent à la ligne, mais cette fois à l'envers, du bas et à droite vers le haut et la gauche.
Les éléments passent à la ligne mais à l'envers

Alignez les éléments sur un axe principal et secondaire

Les éléments sont organisés par défaut de manière horizontale. Mais ils peuvent être organisés de manière verticale. Selon le choix que vous faîtes, ça va définir ce qu'on appelle l'axe principal. Il y a aussi un axe secondaire :

  • si vos éléments sont organisés horizontalement, l'axe secondaire est l'axe vertical ;

  • si vos éléments sont organisés verticalement, l'axe secondaire est l'axe horizontal.

Pourquoi je vous raconte ça ? Parce que nous allons découvrir comment aligner nos éléments sur l'axe principal et sur l'axe secondaire.

Alignez sur l'axe principal avec la propriété  justify-content

Pour changer leur alignement, on va utiliser justify-content, qui peut prendre ces valeurs :

  • flex-start: alignés au début (par défaut) ;

  • flex-end: alignés à la fin ;

  • center: alignés au centre ;

  • space-between: les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux) ;

  • space-around: idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités.

On écrit alors :

.container {
    display: flex;
    justify-content: flex-start /* OU flex-end
    OU center
    OU space-between
    OU space-around; */
}

Le mieux est encore de tester toutes les valeurs possibles pour voir ce que ça donne, vous ne pensez pas ?

Vous voyez comment les éléments s'alignent différemment selon les cas ? Avec une simple propriété, on peut intelligemment agencer nos éléments comme on veut !

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 :

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 350px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
}

Avec une direction verticale (“column”), le centrage fonctionne de la même façon, mais cette fois en hauteur.

Alignez sur l'axe secondaire avec  align-items

Si nos éléments sont placés dans une direction horizontale (ligne), l'axe secondaire est... vertical. Et inversement : si nos éléments sont dans une direction verticale (colonne), l'axe secondaire est horizontal.

La propriété align-items  permet de changer leur alignement sur l'axe secondaire, grâce aux valeurs :

  • 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 ces exemples, nous allons partir du principe que nos éléments sont dans une direction horizontale (mais n'hésitez pas à tester aussi dans la direction verticale !).

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Saint Graal du développeur web, le centrage vertical et horizontal peut d'ailleurs être obtenu encore plus facilement. Dites-vous que votre conteneur est une Flexbox, et établissez des marges automatiques sur les éléments à l'intérieur. C'est tout ! Essayez :

.container {
    display: flex;
}

.element {
    margin: auto;
}

Répartissez les blocs sur plusieurs lignes avec align-content

Si vous avez plusieurs lignes dans votre Flexbox, vous pouvez choisir comment celles-ci seront réparties avec align-content.

Prenons donc un cas de figure où nous avons plusieurs lignes. J'autorise les éléments à aller à la ligne avecflex-wrap.

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 :

  • stretch  (par défaut) : les éléments s'étirent pour occuper tout l'espace ;

  • flex-start  : les éléments sont placés au début ;

  • flex-end  : les éléments sont placés à la fin ;

  • center  : les éléments sont placés au centre ;

  • space-between  : les éléments sont 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.

À vous de jouer !

Maintenant que vous maîtrisez les propriétés de Flexbox, nous allons en profiter pour mettre en forme les pages du portfolio de Robbie Lens !

Des modifications ont été apportées au fichier de code pour que vous ayez davantage d'éléments :

  • des images ont été ajoutées dans le dossier "images" ;

  • des sections ont été ajoutées dans la page d'accueil ;

  • le style du footer a été modifié pour avoir le logo en haut à gauche de la page, et les liens de navigation à droite.

À partir de cette base de code, vous allez :

  • utiliser  flex  pour avoir le logo en haut à gauche de la page, et les liens de navigation à droite dans l’en-tête ;

  • réagencer les éléments pour avoir le titre de la page d'accueil, le paragraphe, et le lien ayant la classe "CTA" à gauche, et la photo à droite ;

  • importer les images dans la page d'accueil, et créer une grille d'images avec deux rangées de 3 images chacune. 

En résumé

  • Le principe de Flexbox est d'avoir un conteneur avec plusieurs éléments à l'intérieur. Avec  display: flex;  sur le conteneur, les éléments à l'intérieur sont agencés en mode Flexbox (horizontalement, par défaut).

  • Flexbox peut gérer toutes les directions. Avec  flex-direction , on peut indiquer si les éléments sont agencés horizontalement (par défaut) ou verticalement. Cela définit ce qu'on appelle l'axe principal.

  • L'alignement des éléments se fait sur l'axe principal avec  justify-content  et sur l'axe secondaire avec  align-items .

  • Avec  flex-wrap, on peut autoriser les éléments à revenir à la ligne s'ils n'ont plus d'espace.

  • S'il y a plusieurs lignes, on peut indiquer comment les lignes doivent se répartir entre elles avec  align-content.

Alors, la découverte de Flexbox vous a plu ? J'espère, parce que dans le chapitre suivant nous allons voir les bases d'un outil tout aussi puissant : CSS Grids !

Example of certificate of achievement
Example of certificate of achievement