Question image
Mon client souhaite bien sûr référencer des véhicules sur son site internet de manière responsive. Mais toutes les techniques connues (flex, grille) placent le dernier élément dans la ligne suivante.
Ce que j'essaie de faire avec les images
Mais pour un héros, c'est extrêmement moche. Les clients veulent :
La partie délicate est que le nombre d'éléments doit êtredynamique. Généralement entre 4 et 6 voitures
Je sais que je peux choisir les deux derniers articles comme celui-ci
.item:nth-last-child(-n+2) { order: 2; /* set order to 2 for the last two items */ }
Mais je ne peux pas les forcer à s'emballer. Des idées?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il s'avère que je dois obtenir le nombre d'éléments à l'avance et injecter la classe dans la liste pour contrôler l'affichage
...
.SENARIO_4_ITEMS { .container { width: 268px; } @media #{$larger-down} { a { flex-basis: 50%; display: flex; justify-content: center; .container { width: 268px; } } } } .SENARIO_5_ITEMS { .container { width: 270px; } @media #{$xxlarge-down} { a { flex-basis: 33%; display: flex; justify-content: center; .container { width: 300px; } } } } .SENARIO_6_ITEMS { a { flex-basis: 33%; display: flex; justify-content: center; .container { width: 300px; } } @media #{$xxlarge-down} { .container { width: 300px; } } }