Discussion :

[chile]

Bonjour,

J'essaye en vain d'aligner mes 3 cadres (responsive).

J'arrive a bien les aligner en ligne, mais ils restent sur la gauche. Lorsque je teste des fonctions flex et autres, je perds le responsive

Merci pour votre aide.

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#contenant1index {
width: 90%;
margin: auto;
 
justify-content: center;
align-content: center;
align-items: center;
 
}
#cadre1gauche {
display: inline-block;
justify-content:center;
 
	width: 400px;	
	margin-right: 10px;
	align-self: auto;
	text-align: justify;
}
#cadre1milieu {
display: inline-block;
justify-content:center;
 
	width: 400px;	
	margin-right: 10px;
}
#cadre1droit {
display: inline-block;
justify-content:center;
 
	width: 400px;	
	margin-left: 10px;
}

[Invité]

Bonjour,

1- un code CSS ne sert à rien sans le code HTML associé.

2- "flexbox"

3- width: 400px; : (largeurs fixes) en quoi c'est "responsive" ?

[JefReb]

Bof, puisqu'il ne met pas son code html, un petit coup de pouce, parce que ça m'amuse ...
https://codepen.io/JefReb/pen/jZZNdd
@chile mais pourquoi utiliser des id, des classes css suffiraient largement. Mais bon.

Code css :

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
* {
	margin: 0;								
	padding: 0;								
	box-sizing: border-box;					
}
html, body {
	height: 100%;							
	font-size: 100%;						
}
body {
	font-family: "Times New Roman", Times, serif; 
	font-size: 100%;						
}
#contenant1index {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	justify-content: center;
}
#cadre1gauche, #cadre1milieu, #cadre1droit {
	border: 1px solid #ff22ff;
	height: auto;
}
@media screen and (min-width: 640px) {
#contenant1index {
	-webkit-flex-direction: row;
	flex-direction: row;
}
#cadre1gauche, #cadre1milieu, #cadre1droit {
	-webkit-flex: 1 1 33%;
	flex: 0 0 33%;
}
}

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
<div id="contenant1index">
  <div id="cadre1gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. 
    In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. 
    Aliquam posuere lobortis pede. 
    Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. 
    Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
    Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </div>
  <div id="cadre1milieu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. 
    In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. 
    Aliquam posuere lobortis pede. 
    Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. 
    Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
    Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </div>
  <div id="cadre1droit">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. 
    In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. 
    Aliquam posuere lobortis pede. 
    Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. 
    Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
    Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </div>
</div>

[chile]

bonjour, merci pour vos réponse.
voici le 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
15
16
17
<div id="contenant1index">
<div id="cadre1gauche">
Cadre 1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br /><br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br /><br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div id="cadre1milieu">
Cadre 2 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br /><br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br /><br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div id="cadre1droit">
Cadre 3 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br /><br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br /><br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
</div>

le responsive fonctionne bien dans le sens ou suivant la taille de l'écran, les cardes se superposent.
le width: 400px; parce que j'ai pas trouvé autre chose pour avoir une largeur mini et que ca passe en dessous lorsque ca atteint cette largeur mini.
Je regarde la réponse de JefReb...

[Invité]

Code css :

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

min-width

[chile]

Avec flexbox, je n'ai plus le responsive avec les cadres qui se superposent.

[Invité]

Quand on l'utilise correctement, si.

[chile]

merci.
https://demo.agektmr.com/flexbox/

[JefReb]

Avec flexbox, je n'ai plus le responsive avec les cadres qui se superposent.

Qu'est-ce que tu entends avec "se superposent"? Adapté aux smartphones?
Dans mon poste je donnais simplement un exemple à adapter, et j'ai mis la barre à

Code css :

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

@media screen and (min-width: 640px)

Mais c'était un exemple rapide ...