26744 sujets

CSS et mise en forme, CSS3

Bonjour,

J'essaye de faire deux blocs image + texte en deux colonnes je veux que la colonne 2 partie texte soit plus grande que la colonne 1 là où se situe mon image: avec flex: 1 2. Là pas de soucis... Mais pour mon responsive ça ne parvient pas à se mettre à la ligne avec le flex-wrap qui enveloppe mon container. Est-ce que j'ai fais une erreur quelque part ? C'est codé en SASS

HTML:
<section class="section-two">
				<div class="container-two">
					<div class="background-one"></div>
					<div class="image-seo">
						<img src="./assets/images/test-seo-1.png">
					</div>
				</div>
				<div class="container-two">
					<div class="seo-two">
						<h2>Lorem ipsum</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat.</p>
					</div>
				</div>
		</section>


CSS:
.section-two{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 300px;
		.container-two{
			flex:1 2;
		}
				.background-one{
					background-color: $background-seo;
					@extend %background-big;
				}
				.image-seo{
					margin: -420px 0 0 70px;
				}
		
			.seo-two{
				max-width: $width-text;
				margin: auto;
	   				h2{
						font-size: $title-socialseo;
					}
			}
	
}

Modifié par tcdev (12 Jul 2019 - 14:58)
Administrateur
Hello,

Je vais devoir partir et vais te donner une réponse partielle, peut-être fausse, je m'en excuse.

Je ne comprends pas tes valeurs de flex: 1 2;
Pourquoi un flex-shrink de valeur 2 pour chacun des deux blocs ? Je ne saisis pas.

En dehors de ça, j'ai peut-être une piste : flex: 1 2; signifie que la troisième valeur non mentionnée (flex-basis) vaut "0" (et non "auto" qui est sa valeur initiale)
Concrètement tu dis à tes deux boîtes :
- vous pouvez vous agrandir équitablement si vous avez de la place (flex-grow: 1)
- vous devez vous réduire équitablement si vous avez de la place (flex-shrink: 2) (j'aurais mis 1 aussi pour ma part)
- votre taille initiale est de 0 pixel.

C'est sans doute ce 3è point qui pose problème : tant que flex-basis vaudra 0, tu ne pourras sans doute pas actionner un retour à la ligne avec flex-wrap.

Bon courage Smiley smile
Modifié par Raphael (12 Jul 2019 - 15:35)
Meilleure solution
Merci je comprends mieux et ça fonctionne avec un tuto en plus sur codepen je vois mieux la chose !
Bonjour tcdev,

Je penses qu'il te suffit de changer la valeur de flex-direction dans ta media querie
@media screen and (max-width: 640px) {
.section-two{
flex-direction : column;
}
}

tu auras surement d'autres propriétés flex à redéfinir ...