bug dans IE11 en utilisant la propriété flex sur un <table>

Version imprimable

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

Code:

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:

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

19/05/2018, 08h54
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 !
19/05/2018, 10h11
_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
19/05/2018, 22h15
_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:

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:

flex:200px;

quelqu'un peut m'aider ?:calim2:
20/05/2018, 08h11
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.

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:

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:

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; }

20/05/2018, 11h02
_youri

Merci pour les conseils, le site marche en responsive, je n'ai malheureusement pas le niveau que je voudrais avoir en CSS même si j'ai presque fait un sans faute au 2 premiers Quizz CSS du forum:cfou:

Pour l'instant j'ai fait une dizaine de sites en CSS, seulement 3 en responsive et c'est la première fois que je me sers de la propriété display ( flex ) !!!:aie: