J'ai vu cela, la question a été posée beaucoup, mais je n'ai pas vraiment eu une réponse qui fonctionne. J'essaie de créer 3 divs centrés avec plusieurs lignes en utilisant ( Boîte Flex forte>) pas grille s'il vous plaît. Est-ce possible et quelle manière simple. Il devrait être un centre aligné.
J'essaie d'y parvenir.
voir comme aligné centralement. Mais le mien est un peu aliné à la gauche et si j'utilise Ceci est mon code P> 
Justify Content: Centre Code> pour le wrapper Les deux boîtes vont au milieu, comme ceci.
p> .wrapper {
background: #ff0000;
text-align: center;
width: 90%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 5% 0;
justify-content: center;
}
#squares {
background: #00ff00;
width: 30%;
height: 100px;
margin: 10px;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
3 Réponses :
Vous pouvez aligner des éléments à gauche avec Si vous ouvrez l'exemple ci-dessous sur une page complète, vous pourrez voir le résultat attendu. P> S'il vous plaît aussi Notez que vous avez utilisé p> justify-contenu: flex-start; code> au lieu de justify-contenu: Centre code> mais pour le centrer tout, vous pourriez Besoin de commencer à jouer avec Margins code> et taille de l'écran. ID code> dans plusieurs endroits ( #squares code>) qui pourrait causer des problèmes. Je l'ai remplacé par une classe code>. P>
<div class="wrapper">
<div class="squares">
<a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"/></a>
</div>
<div class="squares">
<a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
</div>
<div class="squares">
<a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"/></a>
</div>
<div class="squares">
<a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
</div>
<div class="squares">
<a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
</div>
</div>
Les divs ne centralisent pas d'aligner dans le rouge, ils sont laissés alignés, j'ai également besoin d'eux pour être centrés.
J'ai édité la réponse. Jetez un coup d'oeil s'il vous plait. J'ai également ajouté des notes afin de clarifier quelques choses. J'espère que cela vous aide à sortir.
Une exigence est pour La deuxième exigence que vous demandez est qu'elles devraient être centrées également. Pour cela, je pense que vous pouvez utiliser un remplissage égal ou
Si vous voulez que vous puissiez placer tous vos éléments dans un autre justify-contenu: flex-start qui placerait votre dernière ligne selon vos besoins.
des deux côtés pour que les lignes se ressemblent comme si elles sont alignées au centre.
div inside flex-conteneur. Ensuite, vous pouvez Justify-Content: Centre Le nouvel article div .
Cela ne fonctionne pas mais je peux peut-être utiliser l'idée de rembourrage.
En fait, nous n'avons pas besoin de Affichage: Contenu . J'ai édité la réponse
<div class="wrapper">
<div class="wrapper-inner">
<div class="square">
<div class="square-inner">
<a href="#"><img src="http://placekitten.com/200/200" /></a>
</div>
</div>
<div class="square">
<div class="square-inner">
<a href="#"><img src="http://placekitten.com/200/200" /></a>
</div>
</div>
<div class="square">
<div class="square-inner">
<a href="#"><img src="http://placekitten.com/200/200" /></a>
</div>
</div>
<div class="square">
<div class="square-inner">
<a href="#"><img src="http://placekitten.com/200/200" /></a>
</div>
</div>
<div class="square">
<div class="square-inner">
<a href="#"><img src="http://placekitten.com/200/200" /></a>
</div>
</div>
</div>
</div>Belle solution de contournement. Cela semble être la solution à ce problème.