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
Merci pour vos lumières !
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
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>
