WunderQuiz

Pour transformer un élément conteneur en conteneur flex, tu dois ajouter la propriété CSS display: flex à cet élément.

Dans un conteneur flex, l'axe principal (main axis) par défaut est l'axe horizontal. Cela signifie que les éléments flex sont disposés de gauche à droite le long de l'axe horizontal. L'axe transversal (cross axis) par défaut est l'axe vertical, perpendiculaire à l'axe principal.

Pour définir l'axe principal (main axis) d'un conteneur flex afin qu'il aille du haut de la page vers le bas (vertical), tu dois utiliser la propriété flex-direction avec la valeur column. Cela transforme l'axe principal en axe vertical.

Pour placer des éléments de contenu à droite d'un conteneur flex avec flex-direction: row (par défaut), tu peux utiliser la propriété justify-content avec la valeur flex-end. Cette propriété aligne tous les éléments enfants le long de l'axe principal à l'extrémité droite du conteneur.

.flex-container {
    display: flex;
    justify-content: flex-end; /* Aligne les éléments à droite */
}

Pour centrer les éléments sur l'axe principal à l'intérieur d'un conteneur flex, tu peux utiliser la propriété justify-content avec la valeur center. Cette propriété aligne les éléments flex au centre de l'axe principal.

.flex-container {
    display: flex;
    justify-content: center; /* Centre les éléments sur l'axe principal */
}

Pour afficher des éléments répartis uniformément le long de l'axe principal avec de l'espace autour d'eux dans un conteneur flex, tu peux utiliser la propriété justify-content avec la valeur space-around. Cette propriété distribue les éléments de manière à ce qu'il y ait un espace égal autour de chaque élément.

Pour afficher les éléments répartis uniformément le long de l'axe principal, avec le premier élément au début et le dernier élément à la fin, tu peux utiliser la propriété justify-content avec la valeur space-between. Cette propriété distribue les éléments de manière à ce qu'il y ait un espace égal entre eux, tout en plaçant le premier élément au début et le dernier élément à la fin.

.flex-container {
    display: flex;
    justify-content: space-between; /* Répartit les éléments avec un espace égal entre eux */
}

Pour placer les éléments de contenu au bas d'un conteneur lorsque la direction du flex est en colonne (flex-direction: column), tu peux utiliser la propriété justify-content avec la valeur flex-end. Cela aligne les éléments le long de l'axe principal, qui est vertical dans le cas d'une direction de flex en colonne.

.flex-container {
    display: flex;
    flex-direction: column; /* La direction du flex est en colonne */
    justify-content: flex-end; /* Aligne les éléments au bas du conteneur */
}

Pour placer les éléments vers la fin de l'axe principal flex, tu peux utiliser la propriété justify-content avec la valeur flex-end sur le conteneur flex. Cette propriété contrôle l'alignement des éléments le long de l'axe principal.

.flex-container {
    display: flex;
    justify-content: flex-end; /* Aligne les éléments vers la fin de l'axe principal */
}

Pour placer des éléments de contenu à la fin de l'axe transversal dans un conteneur flex, tu peux utiliser la propriété align-items sur le conteneur flex. Par défaut, l'axe transversal est l'axe vertical, donc "à la fin de l'axe transversal" signifie en bas si tu as une direction flex-row (axe principal horizontal).