Comment utiliser la propriété CSS "order" ?

Bonjour à vous tous,

J'avance petit à petit sur mon projet de site web et j'ai résolu un problème de placement des cartouches les uns en-dessous des autres de sorte que les espaces vides soient comblés. Voici une capture écran de l'affichage sur un desktop :


Mais maintenant je suis sur un problème que je n'arrive pas à résoudre. Je souhaite, quand on est dans un affichage smartphone, que les cartouches s'affichent dans un ordre précis. Ainsi, le cartouche "Métadonnées" apparaît en haut de l'écran, dans un affichage sur un écran desktop, mais ce même cartouche apparaît plus bas (en sixième position) dans un affichage smartphone. Je voudrais qu'il s'affiche en seconde position, juste en-dessous du cartouche "Indispensables". J'ai structuré la page de sorte que tous les cartouches se trouvent dans une même <div> (en l'occurrence la balise <main>) pour pouvoir leur appliquer la propriété CSS "order". Mais je n'arrive pas à la faire fonctionner. Le bloc en question ne se place pas à l'endroit que je veux lui assigner. Pourtant, son utilisation est très simple. Il suffit de lui assigner un numéro de position dans une classe à la balise <article> concernée. Quelqu'un pourrai m'expliquer où je commets l'erreur ?

Voici le code HTML et CSS :
https://jsfiddle.net/okpjLawd/

Merci pour votre aide
Modifié par ObiJuanKenobi (17 Oct 2022 - 13:19)

Les cartouches oui, mais du coup elles séparent les éléments à l'unité, et c'est bien ça le problème.

Salut,

en regardant rapidement ton jsfiddle, tes articles ne sont pas dans un container de type flex et la propriété order ne fonctionne donc pas.

Je vais tester ton nouveau Codepen pour voir si les cartouches s'affichent comme je le souhaite en mode smartphone.

Euh moi je propose rien, j'essaie juste de répondre à ta question.

Tu demandes comment utiliser la propriété CSS "order".
Je t'ai répondu qu'il faut un conteneur de type flex pour pouvoir utiliser la propriété order sur les elements enfant de ce conteneur, et que c'est pour ça que cela ne fonctionne pas dans ton jsfiddle.

Tu proposes de faire ce css la :

.cartouche.gouttiere > *{
    display: flex;
    width: 100%;
    margin: 0 0 1rem;
}

Je te traduits ce css qui revient a dire que tous les articles sont flex.
Et la seule façon de faire du order dans ce cas la, c'est de déplacer soit le p soit le h2.

Si tu veux déplacer des articles il faut que ce soit le parent qui soit flex.
Ensuite tu pourras sans doute déplacer le 6e fils de ton conteneur (donc le 6e article) avec un order -1 ,et déplacer le 1er de ton conteneur avec un order -2 pour qu'il reste en premier


Edit : hop mini modification de ton jsfiddle : https://jsfiddle.net/Lcz9otda/

En gros j'ai changé ton min-width:30rem :

@media (max-width: 64rem){
    .cartouche {
      display: flex;
      flex-direction: column;
    }
    
    .cartouche :nth-child(1){
      order:-2;
    }
    
    .cartouche :nth-child(6){
      order:-1;
    }
}

Modifié par Mathieuu (18 Oct 2022 - 16:18)

Bonjour,

Comme tu l'as découvert, ce que tu veut faire en CSS ne peut se faire qu'à l'aide de display:grid; et grid-template-rows: masonry; ce qui donnerait pour ton fiddle : https://jsfiddle.net/dk6bvez1/

Seulement, il faut que le navigateur qui affiche la page en soit capable et pour le moment il n'y a guère que Firefox qui puisse et en le configurant pour. Voir https://caniuse.com/?search=masonry

Depuis des années, ce genre de mise en page, distribution de boite se fait via le très célèbre script masonry (nom repris pour la valeur de grid-template-rows ) . Page officiel du script : https://masonry.desandro.com/ et il y a une foultitude d'options en plus de l'affichage de base que CSS ne fait pas non plus.

Tu peut bien sur utiliser order pour modifier l'ordre d'affichage de tes boites en bricolant pour le fun avec un flex en colonnes et en wrap, mais comment vas tu imposer la bonne hauteur de ta boite en flex pour que les contenus(articles) se dispatchent sur plusieurs colonnes, comment va tu savoir la hauteur qu'utilise les boites (en fonction de la police, ponctuation, images, retour à la ligne,etc...) pour les repositionner via order dans telle ou telle colonne en sachant que tu ne peut pas cibler une colonne, seulement une position.

Pour reprendre l'exemple de @Mathieu et coller un peu plus à ce que tu recherches , voici une bricole https://jsfiddle.net/Lcz9otda/ qui va vite te démontrer que ce n'est pas envisageable sans l'aide d'un script qui va te recalculer tout ça à la volée. En gros , pour le moment, CSS seul n'est pas une possibilité digne de confiance pour ce type d'affichage.
Modifié par gcyrillus (18 Oct 2022 - 18:02)

Alors ça, la solution via CSS column, c'était la solution que je lui avais proposé il y a quelque temps : CodePen.

On avait déjà soulevé alors le problème de la distribution verticale des items (on en revient toujours au même point), d'où la solution en grid + js ligth proposée plus haut. Solution que j'ai envisagé pour moi même, à partir de vos différentes discutions avec ObiJuanKenobi depuis deux ans sur le sujet. Les différentes interventions des alsanautes (mention spéciale à gcyrillus) s'étaient révélées très intéressantes et m'avaient conduit à produire ceci : Masonry with CSS Grid Layout & JavaScript.
Modifié par Olivier C (20 Oct 2022 - 13:49)