flex-wrap: wrap sur 4 images

Bonjour,

J'ai le code suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.photosx4 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 70px;
    padding-top: 10px;
    background-color: #ebebeb;
}
.photosx4 div {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.photosx4 img {
    display: block;
    max-width: 100%; /* permet de remplir la <div> avec l'image */
}
 
@media all and (max-width: 479px) {
    .media, .text-2-col, .photosx4 {
        flex-wrap: wrap;
        width: 95%;
    }
    .media, .text-2-col {
        margin-bottom: 40px;
    }
    .image img {
        max-width: 200px;
    }
    .text-2-col div {
        padding: 10px 0; 
    }
    .text-2-col div:nth-child(1) {
        border-right: none;
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <article class="photosx4">
      <div>
        <img src="piece-de-vie-gite-8-personnes-bretagne-ti-goudoul.jpg" alt="Marie la propriétaire du gite ti Goudoul">
        <span class="center"><h5>La pièce de vie XXL</h5>
          <small>véritable poumon de la maison</small></span>
      </div>
      <div>
        <img src="chambre-kerfany-gite-8-personnes-bretagne-tigoudoul.jpg" alt="Marie la propriétaire du gite ti Goudoul">
        <span class="center"><h5>L'une des 4 chambres</h5>
          <small>draps fournis, lits faits</small></span>
      </div>
      <div>
        <img src="espace-enfants-gite-8-personnes-bretagne-ti-goudoul.jpg" alt="Marie la propriétaire du gite ti Goudoul">
        <span class="center"><h5>La salle de jeux des enfants</h5>
          <small>Jouets, livres, jeux</small></span>
      </div>
      <div>
        <img src="linge-de-toilette-fourni-gite-moelan-dur-mer-tigoudoul.jpg" alt="Marie la propriétaire du gite ti Goudoul">
        <span class="center"><h5>Linge à disposition</h5>
          <small>draps, serviettes de toilette, torchons</small></span>
      </div>
    </article>

Lorsque dans Chrome je mets mon écran à une taille <480px, les 4 images restent sur la même ligne. Pour corriger cela j'ai ajouté

Code:

max-width: 300px;

à la classe

Code:

.photosx4 div img

Je ne suis pas sûre que cette façon de procéder soit la bonne.

Merci

Pour info il s'agit de la page https://gite-moelan.fr/home/home.html

Merci pour votre aide.
Cordialement

Bonjour,

essayer voir

+flex-flow: wrap;text-align: center;padding: 10px;
-flex-wrap: nowrap;padding-top: 10px;

bonne journée.

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
.photosx4 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
/*    flex-wrap: nowrap;           /*-- OUT --*/
    flex-wrap: wrap;               /*-- autorise le retour ligne --*/
    gap: 10px;
    margin-bottom: 70px;
    padding-top: 10px;
    background-color: #ebebeb;
}

1 pièce(s) jointe(s)

Centrage images Flex

Bonjour,

Merci beaucoup. Ça fonctionne.

Sauriez-vous me dire pourquoi le bac de 4 images n'est pas aligné dans son conteneur (comme le montre la copie d'écran) ?
Pièce jointe 649532

Bon après-midi.
Cdt