Flex Direction

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 45 sur 76.

En CSS, la propriété flex-direction contrôle la direction dans laquelle les éléments sont disposés à l'intérieur d'un conteneur flex. Elle détermine si les éléments sont placés en ligne ou en colonne.

Cela affecte également la manière dont les propriétés telles que justify-content et align-items fonctionnent. L'utilisation correcte de flex-direction aide à construire des mises en page flexibles et réactives.

Voici la syntaxe de base pour utiliser la propriété flex-direction :

.container {
    display: flex;
    flex-direction: value;
}

value : La direction souhaitée pour les éléments flex, qui peut être l'une des suivantes :

row: C'est la valeur par défaut. Les éléments flex sont placés en ligne, de gauche à droite. L'axe principal est horizontal, et l'axe transversal est vertical.

row-reverse : Les éléments flex sont placés en ligne, de droite à gauche. L'axe principal est horizontal et l'axe transversal est vertical.

column : Les éléments flex sont placés en colonne, de haut en bas. L'axe principal est vertical et l'axe transversal est horizontal.

column-reverse : Les éléments flex sont placés en colonne, de bas en haut. L'axe principal est vertical, et l'axe secondaire est horizontal.

Par exemple :

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

Dans cet exemple, l'élément .container-row affichera ses éléments flex en ligne de gauche à droite, l'élément .container-row-reverse les affichera de droite à gauche.

Défi

Facile

On vous donne un document HTML avec deux éléments parents <strong><div></strong>, chacun contenant trois éléments enfants <strong><div></strong>. Les éléments parents <div> ont déjà été définis comme des conteneurs flex à l'aide de display: flex;. Votre tâche consiste à utiliser la propriété flex-direction pour modifier la disposition des éléments flex.

Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe container1.
- Définissez sa propriété flex-direction sur column pour disposer les éléments flex dans une colonne verticale.
Écrivez une règle CSS qui cible l'élément <div> avec la classe container2.
- Définissez sa propriété flex-direction sur column-reverse pour disposer les éléments flex dans une colonne inversée.

Aide-mémoire

La propriété flex-direction contrôle la direction dans laquelle les éléments sont disposés à l'intérieur d'un conteneur flex :

.container {
    display: flex;
    flex-direction: value;
}

Valeurs :

row : Par défaut. Éléments placés de gauche à droite (axe principal horizontal)
row-reverse : Éléments placés de droite à gauche (axe principal horizontal)
column : Éléments placés de haut en bas (axe principal vertical)
column-reverse : Éléments placés de bas en haut (axe principal vertical)

.container-row {
    display: flex;
    flex-direction: row;
}

.container-column {
    display: flex;
    flex-direction: column;
}

Essayez vous-même

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>