Votre panier est vide.
Nous savons modifier des attributs visuels tel que les couleurs et les polices, ainsi que régler la taille des différents éléments. Il ne reste plus qu’à savoir comment les agencer entre eux ! Comment centrer les éléments, ou les placer à droite ? Comment les aligner en ligne ou colonne ? C’est ce que nous allons voir maintenant avec Flex Box, LE standard recommandé par le W3C !
Pour ce chapitre, je travaillerai avec le code HTML suivant :
<body>
<header>
<img src="image.jpg" alt="Mon image"/>
<p>La Page</p>
</header>
<main>
<div class="mesElements">
<p>Je me présente...<p/>
<img src="image2.jpg" alt="Mon image 2"/>
</div>
</main>
</body>
Utiliser Flex sur un élément
Avant d’utiliser une quelconque propriété Flex sur un élément, il faut d’abord déclarer cet élément comme un élément Flex. On utilise pour cela la propriété « display » sur notre élément AVANT l’utilisation d’autres propriétés Flex !
Voici comment utiliser les propriétés Flex sur mon header :
header {
display: flex;
}
Définir l’orientation des éléments
Pour cette partie sur l’orientation des éléments, nous utiliserons la propriété « flex-direction », qui peut prendre les valeurs suivantes :
- row : les éléments à l’intérieur de l’élément cible sont disposés en ligne
- column : les éléments à l’intérieur de l’élément cible sont disposés en colonne
- row-reverse : même effet que row, mais les éléments sont inversés
- column-reverse : même effet que column, mais les éléments sont inversés
Cette même propriété a également pour effet de redéfinir l’axe principal et l’axe secondaire au sein l’élément. Cela aura une influence sur de nombreuses autres propriétés Flex, qui ne donnerons pas le même résultat visuel selon la configuration des axes !
Ainsi :
- row (et row-reverse) alignera l’axe principal à l’horizontale
- column (et column-reverse) alignera l’axe principal à la verticale
L’axe secondaire est toujours aligné perpendiculairement à l’axe principal.
Représentation des axes selon la disposition choisis
Exemple d’utilisation de flex-direction :
header {
display: flex;
flex-direction: row;
}
Définir l’alignement et l’espacement des éléments
Nous allons travailler ici avec les deux propriétés suivantes :
-
justify-content : gère l’alignement des éléments sur l’axe principal
-
align-items : gère l’alignement des éléments sur l’axe secondaire
justify-content agis sur les éléments suivant l’axe principal. La direction dépend donc de la valeur choisie pour l’attribut flex-direction ! Cette propriété peut prendre les valeurs suivantes :
-
flex-start : place les enfants de l’élément ciblé en début de ligne
-
flex-end : place les enfants de l’élément ciblé en fin de ligne
-
center : place les enfants de l’élément ciblé au centre
-
space-around : étale les enfants de l’élément ciblé sur tout l’espace disponible et les espaces équitablement les uns des autres
-
space-between : même effet que space-around, mais sans espace en début et en fin
align-items agis lui sur les éléments suivant l’axe secondaire. Il peut prendre les valeurs suivantes :
-
stretch : les enfants de l’élément ciblé prennent tout l’espace disponible
-
flex-start : place les enfants de l’élément ciblé en début de ligne
-
flex-end : place les enfants de l’élément ciblé en fin de ligne
-
center : place les enfants de l’élément ciblé au centre
Voici un exemple permettant, dans mon main, d’afficher mon image sous mon paragraphe, les centrer horizontalement et les espacer équitablement verticalement :
main {
display: flex;
flex-direction: column;
align-items: center; /* l’axe secondaire est horizontale */
justify-content: space-around; /* l’axe principal est verticale */
}
Note : j’ai veillé à mettre flex-direction avant les autres propriétés (sauf display) afin que les propriétés suivantes s’appuient bien sur l’axe que j’ai choisi !
Mise en pratique !
Pour cet exercice, vous pouvez reprendre le code HTML que nous avons utilisé en exemple, ou bien créer vos propres éléments.
Voici les tâches que je vous demande de réaliser :
-
Aligner horizontalement quatre images de mêmes dimensions en les espaçant équitablement l’une de l’autre à l’intérieur de votre main
-
Dans un conteneur aside de minimum 400×400 px, centrez horizontalement et verticalement une image de 50×50 px
-
Ajouter une remarque