28182 sujets

CSS et mise en forme, CSS3

[Résolu] Comment utiliser la propriété CSS "order" ?

Bonjour à vous tous,

J'ai un souci avec la propriété CSS order. Je ne parviens pas à placer un cartouche précis là où je veux. C'est-à-dire que j'ai un ordre logique 1, 2, 3, 4, 5 dans le code HTML et je voudrais le modifier de sorte que le cartouche 3 débute la suite pour donner 3, 1, 2, 4, 5, sans avoir à modifier l'ordre logique dans le code HTML. J'ai utilisé le pseudo sélecteur :nth-child(3) dans la feuille de styles CSS, pour cibler le cartouche 3, et je lui ai donné : order: 1;. Mais il ne se positionne pas au début, il se place à la fin. Je ne comprends pas pourquoi. Quelqu'un saurait m'expliquer ?

Voici le code HTML et CSS :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Propriété CSS Flexbox</title>
    <style>
        .cartouche {
            display: flex;
            align-content: flex-start;
            flex-wrap: wrap;
            border: 3px dotted red;
            height: 20rem;
        }

        .chiffre {
            text-align: center;
            padding: 1rem;
            background-color: green;
            color: white;
            width: 25px;
            font-size: 2rem;
            margin: .5rem;
        }

        .ordre:nth-child(3) {
            order: 1;
        }
    </style>
</head>

<body>
    <div class="cartouche">
        <p class="chiffre">1</p>
        <p class="chiffre">2</p>
        <p class="chiffre ordre">3</p>
        <p class="chiffre">4</p>
        <p class="chiffre">5</p>
    </div>
</body>

</html>


Et voici le résultat final :
upload/1707549028-62242-capturedncran2024-02-10080518.png
Modifié par ObiJuanKenobi (10 Feb 2024 - 08:13)
Bonjour,

tu as flex-direction (row-reverse ou column-reverse); Ça permet déjà d'inverser l'ordre, mais pas de choisir entre. Après tu as pour ton cas :
.cartouche :nth-child(1) { order: 3; }
.cartouche :nth-child(2) { order: 3; }
.cartouche :nth-child(3) { order: 2; }
.cartouche :nth-child(4) { order: 4; }
.cartouche :nth-child(5) { order: 5; }


Il faut jouer avec les valeurs entre () et les valeurs dans order. Parce que c'est plus compliqué qu'une simple inversion des valeurs. Il faut lire à fond l'article, vers la fin :
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items
Mais pourquoi vouloir le modifier en css, puisque tu devras intervenir de toute façon ?
Meilleure solution
D'accord, je n'avais pas compris que je devais associer une classe aux autres cartouches.
Cela marche maintenant, merci pour ton aide, Bongota.
Modérateur
Par défaut, la valeur de order est 0. Si deux ou plus éléments ont le même poids, l'ordre du DOM prend le relais.
La valeur -1 est très utile si tu veux mettre un élément devant les autres (tu ne dois pas définir les autres).
A l'inverse, uniquement définir "1" pourrait être utile dans ton cas pour ne pas définir les autres également, voir l'exemple.

Attention par contre, ça ne déplace pas les éléments dans le DOM. Si tu as des boutons à l'intérieur, avec une navigation au clavier pour focus les boutons, tu auras un chemin du focus plutôt étrange pour l'utilisateur.
-> A utiliser en connaissance de cause Smiley smile
Modifié par Yordi (15 Feb 2024 - 07:52)
Yordi, ton exemple donne exactement le même résultat que moi au début, c'est-à-dire que la case 3 se positionne à la fin et non au début. Donc, je ne comprends pas bien où tu veux en venir avec ton explication. Mon but est de placer la case 3 au début, pas à la fin.
Modérateur
@ObiJuanKeno
Yordi t'explique quand même que :
a écrit :
La valeur -1 est très utile si tu veux mettre un élément devant les autres (tu ne dois pas définir les autres).

Il te fournit un exemple avec du code tout prêt ou tu n'as qu'a jouer sur la valeur de order pour en voir les effets/résultats en direct Smiley cligne
Prévenir un modérateur
Répondre au sujet
Aller à