28106 sujets

CSS et mise en forme, CSS3

Bonjour,

Je cherche à faire une mise en page de blocs. Le nombre peut varier, je ne le connaît pas (il s'agirait de zones produits).

J'ai donc utiliser Flex mais j'ai un problème avec les derniers éléments qui ne s'alignent pas comme je le voudrais. Sur le conteneur flex j'ai mis justify-content: space-between donc les éléments sont bien centrés mais problème avec les derniers car leur nombre ne permet pas de remplir une ligne complète.

Je mets le code pour exemple ce sera plus clair Smiley smile

Merci pour vos lumières !


<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
	<body>
		<div id="wrapper">
			<div id="gallery">
				<div class="prod"></div>
				<div class="prod"></div>
				<div class="prod"></div>
				<div class="prod"></div>
				<div class="prod"></div>
				<div class="prod"></div>
				<div class="prod"></div>
			</div>
		</div>
	</body>
</html>



		<style>
			#wrapper {
				width:100%;
				text-align:left;
			}
			
			#gallery {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
			}
			
			#gallery > .prod {
				width: 350px;
				height: 400px;
				margin-bottom: 10px;
				background-color: #000;
				border: 1px solid blue;
			}
						
			@media screen and (max-width: 1075px) {
				#gallery > .prod {
					width: 49%;
				}			
			}		
		</style>		
Administrateur
Bonjour,

Si le nombre est variable, cela complique énormément les choses avec Flexbox car il n'y a pas encore de propriété pour gérer les espaces (gouttières).

De mon expérience, je dirais :
- space-between ne servira à rien
- donner une largeur aux éléments (ex. 20% si tu veux qu'il y en ait 5 par rangée)
- "espacer" les éléments en jouant sur leur marge interne (padding) à condition d'être en box-sizing: border-box

EDIT : il y a un article sur Alsacréations à ce sujet : https://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html Smiley cligne
Modifié par Raphael (21 Sep 2017 - 15:54)
Meilleure solution