Après avoir vu le fonctionnement et les propriétés de base dans le tutoriel précédent, nous allons voir ici l'alignement des items avec Flexbox.
L'alignement des items avec Flexbox
1/ Positionnement des items sur l'axe principal (main axis)
2/ Positionnement des items sur l'axe transversal (cross axis)
1/ Positionnement des items sur l'axe principal
Pour positionner nos items sur l'axe principal (le main-axis), nous utilisons la propriété justify-content.
On va agrandir la largeur de notre container pour avoir un meilleur rendu et tester la valeur space-between à la propriété justify-content afin que nos items s'étirent sur tout l'axe.
See the Pen
space-between by anna (@cds-creation-de-site)
on CodePen.
Vous pouvez donc voir que le rendu est propre, les éléments s'étirent parfaitement à l'intérieur de notre container avec space-between sans laisser de marge sur les côtés.
Vous pouvez tester avec d'autres valeurs et également modifier l'axe principal en vertical (flex-direction: column) avec ces mêmes valeurs.
space-between: les éléments s'étirent sur l'axe de manière égale sans laisser de marge sur les côtés.
space-evenly : les éléments s'étirent sur l'axe de manière égale.
space-around : les éléments s'étirent sur l'axe tout en ajoutant de l'espace sur les extrémités (l'espace se trouvant entre chaque item sera divisé en deux sur chaque extrémité).
flex-start : les éléments se positionnent au début. C'est le comportement par défaut.
flex-end : les éléments se positionnent à la fin.
center : les éléments se positionnent au centre.
Ci-dessous un rendu avec la console de Google chrome avec la valeur space-evenly sur l'axe principal horizontal.
Pour avoir une meilleure visibilité :
Dans la partie html de la console, j'ai cliqué sur flex pour mettre en avant le flex-container et en bas j'ai cliqué sur layout et appliqué un fond noir sur ma div.container.
Vous pouvez donc voir que vos items s'étirent parfaitement sur votre main-axis (l'axe principal).
2/ Positionnement des items sur l'axe transversal
Par défaut avec Flexbox, l'axe principal (main-axis) est horizontal. L'axe transversal (cross-axis) sera alors vertical.
Si votre axe principal est vertical, l'axe transversal sera alors horizontal.
Nous avons vu jusqu'à présent comment déplacer vos items sur l'axe principal avec la propriété justify-content.
Pour déplacer vos items sur l'axe transversal, on va utiliser la propriété align-items.
On va prendre comme premier exemple la valeur center pour la propriété align-items. Vous pouvez voir ci-dessous que vos items vont se positionner au centre de votre axe transversal.
See the Pen
align-items Flexbox by anna (@cds-creation-de-site)
on CodePen.
Effectuez des tests avec les différentes valeurs de la propriété align-items ci-dessous pour bien comprendre le positionnement des items sur l'axe transversal.
stretch : valeur par défaut, les items s'étirent sur tout l'axe.
flex-start: les items s'alignent au début de l'axe.
flex-end: les items s'alignent à la fin de l'axe.
baseline: les items s'alignent sur la ligne de base.
A retenir :
Le déplacement des items sur l'axe principal s'effectue avec justify-content.
Le déplacement des items sur l'axe transversal s'effectue avec align-items.
La propriété align-content :
La propriété align-content définit la façon dont l'espace est réparti entre et autour des items le long de l'axe du conteneur.
Elle n'aura pas d'effet si les items sont placés sur une même ligne. Elle sera donc en association avec flex-wrap.
Dans l'exemple ci-dessous :
- les items sont alignés horizontalement sur l'axe principal (valeur par défaut row).
- les items sont étirés le long de l'axe principal sans marge externe (justify-content : space-between).
- retour à la ligne (flex-wrap : wrap).
- les items sont étirés le long de l'axe du conteneur sans marge externe (align-content : space-between).
See the Pen
align-content by anna (@cds-creation-de-site)
on CodePen.
Testez les différentes valeurs ci-dessous pour la propriété align-content.
center - flex-end - flex-start - space-around - space-between
La propriété order :
La propriété order va permettre de définir l'ordre des items du container.
Par défaut l'order des items est à 0.
Testez avec l'exemple ci-dessous en modifiant la disposition des items :
See the Pen
order by anna (@cds-creation-de-site)
on CodePen.
La propriété align-self :
Nous avions vu comment déplacer l'ensemble des items sur l'axe transversal avec align-items.
Nous allons maintenant voir comment séparer les items séparément sur l'axe transversal avec la propriété align-self.
Testez la propriété align-self avec les valeurs : flex-start, flex-end, center.
See the Pen
align-self by anna (@cds-creation-de-site)
on CodePen.
