Chapitre 581 | Autres exemple de variables

Autres exemple de variables

Définir flex-direction en tant que variable CSS

Si vous souhaitez rendre la propriété flex-direction flexible et configurable à l’aide d’une variable CSS, voici les étapes à suivre :

---

Étape 1 : Définir la variable CSS

Vous pouvez définir une variable pour flex-direction, par exemple --flex-direction, et l’utiliser dans la propriété flex-direction.

:root {
    --flex-direction: row;
}

.container {
    display: flex;
    flex-direction: var(--flex-direction);
}

Dans cet exemple :

• La variable --flex-direction est définie au niveau global (dans le sélecteur :root).
• La propriété flex-direction utilise la fonction var() pour récupérer la valeur de la variable.

---

HTML

<div class="container">
    <div>Élément 1</div>
    <div>Élément 2</div>
    <div>Élément 3</div>
</div>

---

CSS

:root {
    --flex-direction: row;
}

.container {
    display: flex;
    flex-direction: var(--flex-direction);
    gap: 10px;
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
}

.container div {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

---

Instructions pour CodePen

1. Collez le code HTML dans la section HTML.
2. Collez le code CSS dans la section CSS.
3. Dans :root vous pouvez modifier la valeur de --flex-direction dans le CSS (row, row-reverse, column, ou column-reverse) pour voir les changements dynamiques dans l’agencement des éléments.