.container {
display: flex;
flex-direction: row; /* les éléments sont affichés de gauche à droite (défaut) */
flex-direction: row-reverse; /* les éléments sont affichés de droite à gauche */
flex-direction: column; /* les éléments sont affichés de haut en bas */
flex-direction: column-reverse; /* les éléments sont affichés de bas en haut */
}
Attention : le comportement justify-content et align-items est inversé lors du changement flex-direction.
Chaque enfant d'un parent en "flex" peut avoir des propriétés CSS lié qui permettent de préciser le comportent d'un ou plusieurs enfant
Cette propriété permet de modifier l'ordre d'affichage des éléments enfants sans modifier leur positionnement dans le code HTML. La valeur par défaut est 0, mais il est possible de définir un ordre personnalisé à chaque élément avec un nombre entier positif ou négatif.
.child_one {
order:2;
}
Cette propriété permet de définir la capacité d'expansion des éléments enfants par rapport aux autres éléments. Elle prend une valeur numérique qui représente le rapport de l'espace disponible pour chaque élément. Par exemple, si un élément a une valeur de 2 et un autre une valeur de 1, le premier élément prendra deux fois plus d'espace que le deuxième élément.
.child_two {
flex-grow:2;
}
Cette propriété permet de définir la capacité de rétrécissement des éléments enfants par rapport aux autres éléments. Elle prend une valeur numérique qui représente le rapport de l'espace disponible pour chaque élément. Par exemple, si un élément a une valeur de 2 et un autre une valeur de 1, le premier élément rétrécira deux fois plus que le deuxième élément si l'espace disponible diminue.
.child_two {
flex-shrink:2;
}
Cette propriété permet de définir la taille initiale des éléments enfants avant la distribution de l'espace disponible. Elle peut prendre une valeur de largeur en pixels, en pourcentage, en em ou en une autre unité de mesure.
.child_two {
flex-basis:400px;
}
Cette propriété permet d'aligner un élément enfant spécifique par rapport aux autres éléments dans le conteneur parent. Elle peut prendre les mêmes valeurs que "align-items" pour définir l'alignement vertical d'un élément enfant. Par exemple, "align-self: center;" alignera un élément enfant au centre verticalement, même si les autres éléments sont alignés en haut ou en bas.
.child_two {
align-self: auto; /* définit l'alignement de l'élément (défaut) */
align-self: flex-start; /* définit l'alignement de l'élément */
align-self: flex-end; /* définit l'alignement de l'élément */
align-self: center; /* définit l'alignement de l'élément */
align-self: baseline; /* définit l'alignement de l'élément */
align-self: stretch; /* définit l'alignement de l'élément */
}