Flexbox partie 2
Hey,
Ça fait un bail ( plus d'un an 😬 ), alors pour mon retour j'ai décidé de continuer la série sur FlexBox
parceque oui, il y'a déjà eu un premier article sur ce sujet que vous pouvez consulter ICI, article que je vous conseille de consulter pour bien comprendre la suite de la série FlexBox
.
Dans l'article précédent on a parlé de la propriété display: flex;
qui permet de transformer un élément en conteneur flex et aussi de flex-direction
qui permet de définir comment les éléments enfants vont s'aligner mais sutout, je vous ai aussi parlé de deux axes mainAxis Alignment
et crossAxis Alignment
qui sont très importants.
Dans cette article on va voir deux autres propriétés qui sont justify-content
et align-items
, elles permettent de controler l'alignement des éléments enfants dans le conteneur flex.
Reprenons nos fichiers, on a un index.html
contenant :
<div class="container">
<div class="item item-1" style="background-color: #f00;"></div>
<div class="item item-2" style="background-color: #0f0;"></div>
<div class="item item-3" style="background-color: #00f;"></div>
<div class="item item-4" style="background-color: #ff0;"></div>
<div class="item item-5" style="background-color: #0ff;"></div>
</div>
et style.css
contenant :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 700px;
display: flex;
flex-direction: row; /* qui est la valeur par défaut */
}
.item {
width: 100px;
height: 100px;
}
Ce qu'on va faire c'est de jouer avec les propriétés de justify-content
pour voir son effet sur les éléments enfants.
Avant, faut savoir que justify-content
peut plusieurs valeurs mais les plus courantes sont :
flex-start
( qui est la valeur par défaut )flex-end
center
space-between
space-around
space-evenly
.container {
height: 700px;
display: flex;
flex-direction: row; /* qui est la valeur par défaut */
justify-content: flex-end;
}
Ce qu'on a fait c'est d'attribuer la valeur flex-end
à la propriété justify-content
et comme nous le voyons sur l'image ci-dessous, les éléments enfants sont alignés à l'extrémité droite du conteneur.
Après ceci on peut se dire automatiquement que flex-end
aligne les éléments à l'extrémité droite, flex-start
aligne les éléments à l'extrémité gauche et center
aligne les éléments au centre.
Et c'est la où on se trompe,
J'ai parlé dans l'article précédent des axes mainAxis Alignment
et crossAxis Alignment
et c'est ici que ca devient important.
Vous devez savoir que :
justify-content
agit sur l'axe principal (mainAxis Alignment
)
Donc techniquement,
align-items
agit sur l'axe secondaire (crossAxis Alignment
)
Sauf toute fois oublier que :
Le sens de l'axe principal et de l'axe secondaire dépend de la valeur de
flex-direction
Si c'est flou alors on va faire un petit rappel et aussi un petite correction de la partie 1 pour bien expliquer ceci une fois pour toute.
Ceci est un schéma qui montre comment les axes sont positionnés en fonction de la valeur de flex-direction
si vous ne devez retenir qu'une seule chose de cet article c'est bien ca.
Avec ca, on peut revenir sur notre code et changer la valeur de flex-direction
pour voir comment les éléments vont s'aligner.
.container {
height: 700px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
Comme vous le voyez sur l'image ci-dessus, les éléments sont alignés en bas du conteneur et c'est parce que la valeur de flex-direction
est column
et donc l'axe principal est l'axe vertical.
et vu qu'on a mi flex-end
comme valeur de justify-content
les éléments sont alignés en bas ( l'extrémité de l'axe principal ).
Je pense que là maintenant ça commence à être clair pour vous,
Je vous conseille de toujours vous référer au schéma que je vous ai montré pour bien comprendre comment les éléments vont s'aligner.
Revenons donc sur notre code et voyons comment les autres valeurs de justify-content
à savoir, space-between
, space-around
et space-evenly
vont agir sur les éléments enfants car on a déjà vu flex-start
, flex-end
et center
.
space-between
: Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux tout en touchant les extrémités du conteneur.
.container {
height: 700px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
space-around
: Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux et aussi un espace aux extrémités qui est la moitié de l'espace entre les éléments.
.container {
height: 700px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
space-evenly
: Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux et aussi un espace aux extrémités qui est égale à l'espace entre les éléments.
.container {
height: 700px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
Maintenant on va voir la propriété align-items
qui permet de controler l'alignement des éléments enfants sur l'axe secondaire ( crossAxis Alignment
).
Je pense que vous avez déjà compris comment ca marche ( n'oubliez pas de toujours vous référer au schéma que je vous ai montré ) donc on va directement voir les valeurs de align-items
qui sont :
flex-start
flex-end
center
stretch
( qui est la valeur par défaut )baseline
On va comment par :
stretch
: Les éléments enfants vont s'étirer pour toucher les extrémités du conteneur.
Cela est un comportement qu'actuellement qu'on voit pas actuellement car j'ai défini une hauteur fixe de 100px
pour les éléments enfants.
ce qu'on va faire c'est de retirer la hauteur des éléments enfants pour voir comment stretch
va agir.
.item {
width: 100px;
/* height: 100px; */
}
Comme vous le voyez sur l'image ci-dessus, les éléments enfants s'étirent pour toucher les extrémités du conteneur.
on va remettre la hauteur des éléments enfants et continuer,
-
flex-start
: Les éléments enfants sont alignés à l'extrémité du conteneur, il y'a pas de différence avecjustify-content: flex-start;
si ce n'est quejustify-content
agit sur l'axe principal etalign-items
agit sur l'axe secondaire. -
flex-end
: Les éléments enfants sont alignés à l'extrémité opposée du conteneur, il y'a pas de différence avecjustify-content: flex-end;
si ce n'est quejustify-content
agit sur l'axe principal etalign-items
agit sur l'axe secondaire. -
center
: Les éléments enfants sont alignés au centre du conteneur, il y'a pas de différence avecjustify-content: center;
si ce n'est quejustify-content
agit sur l'axe principal etalign-items
agit sur l'axe secondaire. -
baseline
: Les éléments enfants sont alignés sur la ligne de base du conteneur, c'est un peu compliqué à expliquer mais c'est comme si les éléments étaient alignés sur une ligne imaginaire qui passe par la base des éléments.
Pour mieux explique cela on va donner des hauteurs différentes à 2 de nos éléments enfants.
.container {
height: 700px;
display: flex;
flex-direction: row;
align-items: baseline;
}
.item {
width: 100px;
height: 100px;
}
.item-1 {
height: 200px;
}
.item-3 {
height: 300px;
}
Comme vous le voyez sur l'image ci-dessus, les éléments enfants sont alignés sur une ligne imaginaire qui passe par la base des éléments.
Je peux vous rassurer que c'est une valeur que vous n'utiliserez pas tous les jours mais c'est bien de la connaitre.
Avant, de vous quitter je vous rappelle de toujours vous référer au schéma que je vous ai montré pour bien comprendre comment les éléments vont s'aligner.
On est arrivé a la fin de cet article et j'espère qu'il vous a plu, si c'est le cas n'hésitez pas a partager sur vos réseaux et aussi a poser vos questions si vous n'avez pas très bien compris un point. On se dit donc au prochain article, ciao ! C'était LN 👋
- Article précédent : Créer un curseur personnalisé
- Article suivant : Grid Template Areas`
Si vous avez des feedbacks ou des questions,
n'hésitez pas à me contacter sur Twitter (X) ou par email.