Direction de Flexbox

Fait partie de la section Style avec 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 flexibles, qui peut être l’une des suivantes :

row : Il s’agit de la valeur par défaut. Les éléments flexibles sont placés sur une ligne, de gauche à droite. L’axe principal est horizontal et l’axe transversal est vertical.

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

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

column-reverse : Les éléments flexibles sont placés dans une colonne, de bas en haut. L’axe principal est vertical et l’axe transversal 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 flexibles sur une ligne de gauche à droite, tandis que l’élément .container-row-reverse les affichera de droite à gauche.

Défi

Facile

Un document HTML contenant deux éléments parents <strong><div></strong> vous est fourni, chacun contenant trois éléments <strong><div></strong> enfants. Les éléments parents <div> ont déjà été définis comme 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> portant la classe container1.
- Définissez sa propriété flex-direction sur column afin de disposer les éléments flex dans une colonne verticale.
Écrivez une règle CSS qui cible l’élément <div> portant la classe container2.
- Définissez sa propriété flex-direction sur column-reverse afin de disposer les éléments flex dans une colonne inversée.

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>