Comment emballer les éléments pour toujours avoir au moins 2 éléments sur la dernière ligne ?
P粉023650014
P粉023650014 2023-09-11 16:49:22
0
1
658

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 :

  • Maximum 5 articles par ligne
  • Au moins 2 articles par ligne

La partie délicate est que le nombre d'éléments doit être dynamique. 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?

P粉023650014
P粉023650014

répondre à tous(1)
P粉147045274

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

<ul class="{{ 'SENARIO_' + numberOfItem + '_ITEMS' }}">

...

.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;                   
        }
    }
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal