Discussion :

[_youri]

Bonjour,
J'utilise ce code CSS pour rendre responsive l'affichage dans un tableau et faire passer l'affichage de ligne à colonne :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@media screen and (max-width: 1000px) {
  #_resp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   align-content:space-between ;
  }

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
44
45
<table align="center" cellpadding="0" cellspacing="0" border="0">
  <tr id="_resp">
    <td width="325">
      <table cellpadding="0" cellspacing="0" border="0" >
        <tr>
          <td width="324">
            <img src="img/thematique.jpg" width="325" height="151" alt="thématique">
          </td>
        </tr>
        <tr>
          <td width="324">Ad Lorem...
          </td>
        </tr>
      </table>
    </td>
 
   <td width="325">
      <table cellpadding="0" cellspacing="0" border="0" >
        <tr>
          <td width="324">
            <img src="img/thematique.jpg" width="325" height="151" alt="thématique">
          </td>
        </tr>
        <tr>
          <td width="324">Ad Lorem...
          </td>
        </tr>
      </table>
    </td>
 
   <td width="325">
      <table cellpadding="0" cellspacing="0" border="0" >
        <tr>
          <td width="324">
            <img src="img/thematique.jpg" width="325" height="151" alt="thématique">
          </td>
        </tr>
        <tr>
          <td width="324">Ad Lorem...
          </td>
        </tr>
      </table>
    </td>
</tr>
</table>

Il n'y a aucun bug dans FF, Chrome et Edge mais IE 11 ne l’interprette pas! comment faire ?
Merci

[NoSmoking]

Bonjour,
si tu ne veux pas avoir de surprise n'utilise pas d'élément <table>, surtout imbriqué, si tu souhaites mettre en oeuvre display:flex, il y a comme un non-sens !

[_youri]

ok je vais recoder le tout avec des div
je voulais aussi savoir comment conserver l'espacement avec space-between quand je réduis la fenêtre du navigateur pour passer de 3 à 2 colonnes ? (avec les 3 colonnes j'ai bien mon espacement mais il disparaît quand il passe à 2)

Sinon je laisse tomber align-content et je joue sur les margin ?

merci bien

[_youri]

j'ai trouvé cet exemple très intéressant car il préserve l'espacement entre les div pendant tout le redimensionnement. apparemment c'est

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

flex: 1 0 200px;

qui indique qu'il faut garder une largeur minimale de 200 px avant de passer à la ligne suivante mais je comprends mal à quoi servent 1 et 0 ? car obtient le même résultat si on écrit

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

 flex:200px;

quelqu'un peut m'aider ?

[JefReb]

Le premier chiffre indique la propriété flex-grow. (grandir, grossir)
La proriété flex:1 indique si l'item à droit de grandir et de prendre la place libre.
Si l'on met flex:2, cela indique que l'item peut grossir 2 fois plus que les autres éléments.

La seconde propriété est flex-shrink (maigrir, rétréssir)

Si il y a 0, c'est que l'item ne peut pas grossir ou rétréssir.
Ainsi flex: 1 0 200px; indique que l'élément peut grossir, mais pas rétréssir.

[NoSmoking]

Dans l'exemple que tu cites ceux sont les margin-left:10px qui garantissent l'espacement entre tes éléments et aucunement la notion de flex.

Lorsque tu « raccourci » avec un flex:200px le résultat appliqué est flex:1 1 200px, mais ce « raccourci » reste maladroit.

Dans ton cas, sur base du code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="box-flex">
  <div>
    <img src="image_001.jpg" alt="">
    Ad Lorem...
  </div>
  <div>
    <img src="image_002.jpg" alt="">
    Ad Lorem...
  </div>
  <div>
    <img src="image_003.jpg" alt="">
    Ad Lorem...
  </div>    
</div>

il me semble que le simple CSS suivant serait acceptable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.box-flex {
  display: flex;
  flex-wrap: wrap;
  align-content:space-between ;
}
.box-flex div {
  width: 324px;
  margin: auto;
}
.box-flex img  {
  width: 100%;
  height: auto;
}