Bienvenue les cadettes et les cadets ! Dans ce chapitre nous allons parler de Flex ! Vous en avez beaucoup entendu parlé dans les chapitres précédents, le moment est enfin venu de voir comment ça marche.
La première chose à retenir : c'est Flex = alignement ! Si vous voulez aligner quelque chose, vous utilisez flex !
Mise en place de flex
Si, dans une <section>, on a 20 <div> qui ont 200px de largeur et de hauteur avec un dégradé en hsl, on obtient ce résultat (toutes les <div> ne sont pas visibles) :
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>body {
margin: 0;
background-color: #121212;
}
section {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: flex-end;
}
section div {
width: 200px;
height: 200px;
}
Pour appliquer l'alignement de type flex sur ces <div>, on va mettre l'option flex sur le parent qui les englobe :
section {
display: flex;
}
Automatiquement, une fois le code appliqué, les <div> seront alignés à l'horizontal de gauche à droite = comportement par défaut.
flex ! Pas les enfants. Les alignements par défaut (horizontal et de gauche à droite) sont bien les valeurs par défaut ! Ça se change facilement.Lien vers la documentation MDN - Flex
Retour à la ligne : flex-wrap
Par défaut, comme on le voit sur l'impression écran ci-dessus, si on a trop d'éléments sur la largeur allouée à notre item HTML, ici notre <section>, les éléments internes vont s'écraser pour rentrer sur une seule ligne. Avec le code suivant :
section {
display: flex;
flex-wrap: wrap;
}
... vous permettez aux éléments enfants de faire un retour à la ligne. La valeur par défaut est : nowrap.
Lien vers la documentation MDN - flex-wrap
De l'espace : gap
Pour espacer nos éléments, on peut utiliser l'option : gap. Elle permet d'espacer verticalement et horizontalement nos éléments pour leur donner toujours le même espace.
section {
display: flex;
flew-wrap: wrap;
gap: 16px;
}Ici, l'espace entre les éléments sera de 16px verticalement et horizontalement.
On peut également découper l'option gap pour mettre une valeur différente entre les colonnes et entre les lignes.
Lien vers la documentation MDN - gap
column-gap
Met de l'espace entre les colonnes :
section {
display: flex;
flew-wrap: wrap;
column-gap: 16px;
}
Lien vers la documentation MDN - column-gap
row-gap
Met de l'espace entre les lignes, ici on a l'espace entre les lignes qui est deux fois plus grand que celui entre les colonnes :
section {
display: flex;
flew-wrap: wrap;
column-gap: 16px;
row-gap: 32px;
}
Lien vers la documentation MDN - row-gap
Alignement principal : justify-content
Ce qui est déroutant quand on débute avec flex, c'est que justify-content ne correspond pas à l'horizontal ou à la verticale, mais à "l'alignement principal". Par défaut, quand on n'indique pas de flex-direction, l'alignement principal = alignement horizontal, si on a flex-direction: column alors l'alignement principal = alignement vertical.
La propriété justify-content permet d'aligner sur cette valeur principale.
Pour tester les options suivantes, on passe le nombre de <div> à 5.
flex-start [par défaut]
Aligne les élément par rapport au "début de l'alignement". Si flex-direction = row, l'alignement se fait de gauche à droite, flex-start aligne donc les items à gauche, si c'est row-reverse = de droite à gauche, il les aligne à droite. Si flex-direction = column, l'alignement principal se fait de haut en bas, donc flex-start aligne en haut et en row-reverse, c'est l'inverse, donc il aligne en bas.
flex-end
Inverse de flex-start, il aligne les éléments à la "fin" de l'alignement, c'est donc l'inverse de flex-start pour les 4 directions listées ci-dessus.
center
Au centre selon l'alignement principal.
space-between
Les éléments s'étirent sur toute la longueur disponible et les espaces sont répartis équitablement entre tous.
space-around
Les éléments ont le même espace de part et d'autre. Entre deux éléments on a donc la marge de l'élément de gauche + la marge de celui de droite = deux fois la marge qu'on retrouve aux extrémités.
space-evenly
Les espaces entre les éléments sont tous égaux et correspondent également aux espaces de part et d'autre du premier et du dernier élément de la liste.
Lien vers la documentation MDN - justify-content
Alignement secondaire : align-items
L'alignement secondaire est le contraire du principal.
stretch [par défaut]
Si la valeur de width ou de height (selon si c'est horizontal ou vertical qui est l'alignement secondaire) n'est pas définie, les éléments s'étirent pour prendre toute la place disponible.
flex-start, center et flex-end
Même fonctionnement que pour justify-content.
Lien vers la documentation MDN - align-items
Modifier le sens de l'alignement : flex-direction
Par défaut, les items alignés le seront de gauche à droite. On peut changer ce comportement avec flex-direction qui détermine la direction de l'alignement :
flex-direction: row= gauche à droite [par défaut]flex-direction: row-reverse= droite à gaucheflex-direction: column= haut en basflex-direction: column-reverse= bas en haut
Autant on voit bien pourquoi on voudrait aligner horizontalement et verticalement, mais l'utilité de row-reverse est moins intuitive.
Imaginez un site qui est écrit de gauche à droite : un site en français. Maintenant, on vous demande de proposer une version de ce dernier en arabe, qui s'écrit de droite à gauche. Quand on fait de l'internationalisation, on ne fait pas que de traduire les sites. On fait aussi en sorte que la logique du design colle avec les contraintes des langues. C'est pourquoi, tout ce qui est à droite sur un site en LTR (Left To Right), devra se trouver à gauche sur un site en RTL (Right To Left) !
C'est un cas d'usage privilégier pour l'utilisation de cette option ! Il suffit alors de passer touts les éléments qui sont en flex-direction: row, en flex-direction: row-reverse et votre site sera alors comme vu dans un miroir.
Lien vers la documentation MDN - flex-direction
Flex en pratique
Aligner dans la nav
Les premiers éléments qu'on souhaite aligner c'est notre image avec le logo et la liste de liens. Leur parent c'est la balise nav, c'est donc lui qui portera la propriété flex.
header nav {
/* ... */
display: flex;
}Ensuite, on souhaite mettre notre logo à gauche et notre liste de liens à droite. On aligne actuellement sur l'horizontal, c'est donc l'alignement principal qu'on souhaite modifier = justify-content. On veut donc que flex mette le premier item tout à gauche et le dernier tout à droite = space-between.
header nav {
/* ... */
display: flex;
justify-content: space-between;
}Maintenant on aligne la liste de liens pour qu'ils soient à l'horizontal. Les items dans la liste ce sont les li et leur parent ul.
header nav ul {
display: flex;
}On enlève les points sur la gauche des éléments de liste.
header nav ul {
display: flex;
list-style: none;
}On ajoute de l'espace entre les items et on enlève les éléments de marges sur le parent ul qui a un padding par défaut à gauche et des margin au-dessus et en-dessous. On le fait pour éviter que ces marges parasitent notre design en bougeant notre liste autrement qu'avec flex.
header nav ul {
display: flex;
list-style: none;
column-gap: 1rem;
padding: 0;
margin: 0;
}Maintenant qu'on a fait ça, notre liste est collée en haut de notre nav, donc on va l'aligner au centre avec notre image, comme l'horizontal est l'aligne principal, la vertical c'est l'alignement secondaire, ce qui correspond à align-items.
header nav {
/* ... */
display: flex;
justify-content: space-between;
align-items: center;
}On modifie la couleurs des liens et notre barre de navigation est terminée.
header nav ul li a {
color: #99005E;
}Aligner les images du header
On termine maintenant le header. Comme on veut simplement que notre image qui est en absolute soit centrée par rapport à l'autre image, on utilise également flex. Leur parent c'est la div qu'on avait ajoutée pour mettre position: relative au parent, on va donc l'utiliser aussi pour flex et on met les deux alignements, principal et secondaire, au centre.
header div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}Et voilà, tous nos items sont alignés grâce à flex.