Fonctionnement emboîtage d'éléments en FLEX

**noradan** · 25/11/2025, 17h34

J'ai un emboîtage de flex qui ne fait pas ce que je pensais et je ne vois pas pourquoi.
La présentation est la suivante

Objet 1

Objet 2 || Objet 3

Objet 4=Image 300px

Objet 5 Image 300px

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
15
16
17
<body>
<div class='corps'>
 
<div class='entete'>
<div class="groupe"> <!-- Colonne 1-->
 <div class="nom">objet1 </div>
<div class="infogroupe">
Objet2
Ojbet 3
</div>   <!--fin infogroupe-->
</div>  <!-- fin groupe=colonne1-->
 
<div>  <!-- Colonne2-->
Objet 4 =image à 300px
Objet 5 = image
</div> <!--Finde colonne 2-->
</div><!--fin dentete-->

Avec le CSS

Code :

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
.corps{display:flex;
flex: 0 1 950px;
flex-wrap:wrap}  boîtes empilée les unes au dessus des autres
.entete{display:flex;
flex-wrap:nowrap;  dans celle-là  les boîtes sont côte-côte
justify-content:space-between}
.groupe{display:flex;
flex:1 1 600px;
flex-wrap:wrap;} deux blocs superposés
.nom{
  width: 600px;
  display: inline-block;
*/flex:1 1 600px;*/
}
.infogroupe{
grid-template-columns:1fr 1fr;  deux colonnes
font-size:16px;}

Et maintenant lorsque je réduis la fenêtre du navigateur rien ne se passe tout reste à 950px.
Je m'attendais à ce que la colonne 2 passe sous la colonne 1 comme ça se passait lorsque la présentation était
codée en ligne
avec objet 1 et 4 en premier bloc horizontal
objet 2,3,5 en second blocs grid 3x1fr
là, lors d'une réduction l'objet 4 passait sous l'objet1.
J'ai reproduit le même schéma mais ça ne fait pas ce que je pensais.

J'ai tenté divers suppression de ceci ou de cela ou ajout de flex ici ou là notamment avec la définition des 600px mais rien ne change tout reste à 950
Où est-ce que je me trompe ?

**Declique69** · 27/11/2025, 10h51

Chez moi c'est le contraire : objet4 est TOUJOURS en dessous de objet1
Et je pense que c'est du à ton flex:0 1 950px

**noradan** · 27/11/2025, 18h13

Là quelque chose ne va pas car l'objet 4 n'est pas dans le même conteneur que le 1.
J'avais déjà tenté de supprimer le flex 0 1 950 mais ça ne donne rien.

**NoSmoking** · 28/11/2025, 12h51

Bonjour,
décidément toujours difficile de comprendre ce que tu cherches à faire...

En regardant rapidement :

Les commentaires dans le CSS ne sont pas conformes, est-ce juste une erreur de recopie ?
Les objets 4 et 5 doivent être dans des conteneurs différents, d'une manière général la construction ne me parait pas solide !
Il manque un display GRID dans la classe infogroupe et de toute façon rien ne se passera, 'élément n'ayant qu'un seul enfant !
...

donc déjà difficile d’appréhender ton soucis, essaie peu être à l'aide de schéma d'expliquer ce que tu souhaite réaliser

**noradan** · 03/12/2025, 15h48

Désolé de revenir avec retard.

en effet "infogroupe" est bien un display grid + flex 0 1 950

J'ai fait le dessin en haut.

Je ne vois pas pourquoi mes commentaires ne sont pas conforme ?
je les ai relus et ça m'a l'air bon

En français :
j'ai un grand rectangle (=entete) contenant deux colonnes
la premiere (=groupe) est composée de 2 blocs superposés le premier (=nom) et le second (=infogroupe) est un grid 2x1fr
la seconde n'a rien de spécial et contient au plus 2 images.

comme mon corps est un wrap (mes boîtes sont empilées les unes au dessus des autres
j'ai mis l'entete en nowrap pour bien avoir mes blocs cote-cote.
et j'ai remis un wrap dans la colonne 1

J'ai d'ailleurs un truc bizarre dans ma colonne 2 je viens juste de m'en appercevoir:
Si je n'ai qu'une seule photo elle est dans le coin en haut à droite, s'il y en a deux une marge apparaît ??
Là encore je ne vois pas du tout pourquoi ?

Merci d'avance

**NoSmoking** · 06/12/2025, 11h30

On va commencer par la fin ...

J'ai d'ailleurs un truc bizarre dans ma colonne 2 je viens juste de m'en appercevoir:
Si je n'ai qu'une seule photo elle est dans le coin en haut à droite, s'il y en a deux une marge apparaît ??
Là encore je ne vois pas du tout pourquoi ?

Mémoire de poisson rouge, voir réponses faites dans la discussion : Supprimer l'espace sous une image.

...

Je ne vois pas pourquoi mes commentaires ne sont pas conforme ?
je les ai relus et ça m'a l'air bon

Comment insérer un commentaire dans une feuille de style ?.

Un vérification du code est également une bonne chose : CSS Validation Service

...
Il me semble que je fini par saisir ce que tu cherches à faire et pour cela il existe bien des méthodes par exemple FLEX et/ou GRID.

Je te mets une trame de ce qui pourrait être fait pour analyse :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entête GRID et FLEX</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2180631">
<meta name="category" content="css">
<meta name="description" content="">
<style>
:root {
--gap: .5rem;
}
img {
  display: block;
  max-width: 100%;
  min-width: 100%;
}
/**
 *-- Partie sur base de GRID
 */
#wrapper-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-areas: "A A D" "BC BC D";
  gap: var(--gap);
  margin: var(--gap) auto;
  max-width: 80em;
}
[id^=area] {
  flex: 1;
  margin: 2px;
  min-height: 5rem;
  border: 1px solid #ABC;
  font-size: 3rem;
  color: #069;
  background-color: #DEF;
}
#area_1 {
  grid-area: A;
}
#area_2 {
  grid-area: B;
}
#area_3 {
  grid-area: C;
}
#area_4 {
  grid-area: D;
}
#area_23 {
  display: flex;
  gap: var(--gap);
  margin: 0;
  border: none;
  background: none;
  grid-area: BC;
}
@media only screen and (max-width:640px){
  #wrapper-grid {
    display: block;
  }
  [id^=area] {
    border: 1px solid #CAB;
    color: #906;
    background-color: #FDE;
  }
}
</style>
<style>
/**
 *-- Partie sur base de FLEX
 */
#wrapper-flex {
  max-width: 80em;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: var(--gap) auto;
}
[id^=flex] {
  margin: 2px;
  min-height: 5rem;
  border: 1px solid #ABC;
  font-size: 3rem;
  color: #069;
  background-color: #DEF;
}
#flex_gauche {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  background: none;
  border: none;
  margin: 0;
}
#flex_droite {
  flex: 1;
  margin: 0;
}
#flex_1 {
  width: 100%;
}
#flex_2 {
  flex: 1;
}
#flex_3 {
  flex: 1;
}
 
@media only screen and (max-width:640px){
  #wrapper-flex {
    display: block;
  }  
  [id^=flex] {
    border: 1px solid #BCA;
    color: #690;
    background-color: #EFD;
  }  
}
</style>
</head>
<body>
<div id="wrapper-grid">
  <div id="area_1">A</div>
  <div id="area_23">
    <div id="area_2">B</div>
    <div id="area_3">C</div>
  </div>
  <div id="area_4">
    <img src="https://picsum.photos/seed/picsum/300/100">
    <img src="https://picsum.photos/seed/picsum/300/100">
  </div>
</div>
<hr>
<div id="wrapper-flex">
  <div id="flex_gauche">
    <div id="flex_1">A</div>
    <div id="flex_2">B</div>
    <div id="flex_3">C</div>
  </div>  
  <div id="flex_droite">
    <img src="https://picsum.photos/seed/picsum/300/100">
    <img src="https://picsum.photos/seed/picsum/300/100">
  </div>
</div>
</body>
</html>

... tu devrais logiquement t'y retrouver

Si tu veux provoquer les changements de « position » sans les media-queries, il te faut préciser des min-width sur tes éléments conteneurs.

Fonctionnement emboîtage d'éléments en FLEX

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager