1485 sujets

Web Mobile et responsive web design

[Résolu] Choisir le nombre d'élément dans flexBox

Bonjour,
Je voudrais savoir si c'est possible de choisir le nombre d'élément dans flexBox.
j'ai 2 fois 3 éléments dans un div et je voudrais savoir lors d'un media-query avec 
flex-wrap: wrap;
si le dernier élément va à la ligne, mais si il peut aller avec le premier du deuxième div (en faite pour les afficher 2 par 2.
Voici le code : 

<div class="activites">
    <figure>
        <img class="activiteimg" src="monImage1" alt="portfolio">
        <figcaption class="infoactivite">monImage1</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage2" alt="portfolio">
        <figcaption class="infoactivite">monImage2</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage3" alt="portfolio">
        <figcaption class="infoactivite">monImage3</figcaption>
    </figure>
</div>
<div class="activites">
    <figure>
        <img class="activiteimg" src="monImage4" alt="portfolio">
        <figcaption class="infoactivite">monImage4</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage5" alt="portfolio">
        <figcaption class="infoactivite">monImage5</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage6" alt="portfolio">
        <figcaption class="infoactivite">monImage6</figcaption>
    </figure>
</div>

Merci.
Modifié par ricem (19 Feb 2024 - 09:26)
Bonjour,

Avec Flexbox, c'est le contenu qui donne le "La", pour la mise en page Grid Layout me semblerait plus approprié. Après il peut y avoir des raisons de rester en flex, on peut mettre alors un flex-basis sur les items :
.activites figure {
    flex-basis: 50%;
}
Olivier C a écrit :
Bonjour,

Avec Flexbox, c'est le contenu qui donne le "La", pour la mise en page Grid Layout me semblerait plus approprié. Après il peut y avoir des raisons de rester en flex, on peut mettre alors un flex-basis sur les items :
.activites figure {
    flex-basis: 50%;
}


Salut, et merci pour ta réponse, du coup, j'ai vu pour le grid...!
re du coup, j'ai fait pour le html :

    <figure>
        <img class="activiteimg" src="monImage1" alt="portfolio">
        <figcaption class="infoactivite">monImage1</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage2" alt="portfolio">
        <figcaption class="infoactivite">monImage2</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage3" alt="portfolio">
        <figcaption class="infoactivite">monImage3</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage4" alt="portfolio">
        <figcaption class="infoactivite">monImage4</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage5" alt="portfolio">
        <figcaption class="infoactivite">monImage5</figcaption>
    </figure>
    <figure>
        <img class="activiteimg" src="monImage6" alt="portfolio">
        <figcaption class="infoactivite">monImage6</figcaption>
    </figure>
en fait, j'ai enlevé tout les "div"
et pour le css :

.activites {
    margin: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; // pour trois colonnes
    padding-bottom: 20px;
    gap: 20px;
}
@media screen and (max-width: 1024px) {
    .activites {
        display: grid;
        grid-template-columns: 1fr 1fr; // pour deux colonnes
    }
}
@media screen and (max-width: 665px) {
.activites {
    display: grid;
    grid-template-columns: 1fr; // pour une colonne
}

Modifié par ricem (23 Feb 2024 - 10:03)
Meilleure solution
Modérateur
Bonjour,

ricem a écrit :
en fait, j'ai enlevé tout les "div"

Excellente initiative ! On ne le dira jamais assez, plus t'as de <div>, plus c'est dur à styler !

Amicalement,
Prévenir un modérateur
Répondre au sujet
Aller à