Alignement des blocs flex le long de l'axe transversal en CSS
Maintenant, alignons les blocs le long de
l'axe transversal. L'alignement le long de cet axe
est défini par la propriété align-items. La valeur
flex-start colle les éléments au début de
l'axe, et la valeur flex-end - à la fin.
Essayons avec des exemples.
Exemple
Dirigeons l'axe principal de gauche à droite. Dans ce cas, l'axe transversal sera dirigé de haut en bas. Ajustons la position de nos blocs à la fois le long de l'axe principal et de l'axe transversal.
Le long de l'axe principal, collons les blocs à son début,
c'est-à-dire au bord gauche. Pour cela, définissons justify-content
à la valeur flex-start. Le long de
l'axe transversal, collons également les blocs à son début,
c'est-à-dire au bord supérieur. Pour cela, définissons align-items
également à la valeur flex-start.
Voyons ce que nous obtenons :
.parent {
display: flex;
flex-direction: row; /* axe principal vers la droite, axe transversal vers le bas */
justify-content: flex-start; /* blocs au début de l'axe principal */
align-items: flex-start; /* blocs au début de l'axe transversal */
}
Résultat de l'exécution du code :
Exemple
Maintenant, collons les blocs à la fin de l'axe transversal,
c'est-à-dire en bas. Pour cela, définissons align-items
à la valeur flex-end :
.parent {
display: flex;
flex-direction: row; /* axe principal vers la droite, axe transversal vers le bas */
justify-content: flex-start; /* blocs au début de l'axe principal */
align-items: flex-end; /* blocs à la fin de l'axe transversal */
}
Résultat de l'exécution du code :
Exemple
Dirigeons maintenant l'axe principal de haut en bas. Comme l'axe principal est vertical, l'axe transversal sera dirigé de droite à gauche. Collons les blocs le long des deux axes à leur début :
.parent {
display: flex;
flex-direction: column; /* axe principal vers le bas, axe transversal vers la droite */
justify-content: flex-start; /* blocs au début de l'axe principal */
align-items: flex-start; /* blocs au début de l'axe transversal */
}
Résultat de l'exécution du code :
Exemple
Et maintenant, le long de l'axe transversal, collons les blocs à sa fin :
.parent {
display: flex;
flex-direction: column; /* axe principal vers le bas, axe transversal vers la droite */
justify-content: flex-start; /* blocs au début de l'axe principal */
align-items: flex-end; /* blocs à la fin de l'axe transversal */
}
Résultat de l'exécution du code :
Exemple
Collons les blocs à la fin des deux axes :
.parent {
display: flex;
flex-direction: column; /* axe principal vers le bas, axe transversal vers la droite */
justify-content: flex-end; /* blocs à la fin de l'axe principal */
align-items: flex-end; /* blocs à la fin de l'axe transversal */
}
Résultat de l'exécution du code :
Exemple
Changeons la direction de l'axe principal - dirigeons-le de bas en haut. Dans ce cas, l'axe transversal ne changera pas de direction, car l'axe principal est toujours vertical.
Collons les blocs au début des deux axes :
.parent {
display: flex;
flex-direction: column-reverse; /* axe principal vers le haut, axe transversal vers la droite */
justify-content: flex-start; /* blocs au début de l'axe principal */
align-items: flex-start; /* blocs au début de l'axe transversal */
}
Résultat de l'exécution du code :
