Discussion :

[Tof90]

Bonjour,

Je cherche à aligner des blocs sur une ligne et un retour à la ligne quand on sort de la largeur du conteneur en conservant les colonnes avec le tout centrer au milieu de mon conteneur. Mon problème est que je n'arrive pas à centrer les lignes de blocs au centre du conteneur sans perdre les colonnes. C'est pas facile à expliquer du coup une capture d'écran sera plus explicite:



Le rendu est ce que je cherche à faire. Par contre j'aimerai centrer les blocs en noir dans le conteneur rouge tout en conservant l'alignement en colonne (bloc 7 sous le bloc 1, bloc 8 sous le bloc 2, etc..)

Voici le code css:

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
#conteneur 
{
width: 100%;
background-color:#f8f8f8;
border: 1px red solid;
display: flex;
flex-wrap: wrap;
}
 
.bloc
{
padding: 15px;
width: 15%;
border: 1px black solid;
display: flex;
}

J'ai essayé de rajouter un justify-content: center; dans mon conteneur et j'ai obtenu exactement ce que je ne voulais pas:



Mes blocs ne sont plus alignés en colonne après le retour à la ligne.

Je ne suis pas un spécialiste des blocs flexibles et je ne sais plus vraiment quoi faire.

Je pourrai tricher en ajoutant des blocs vides avec un multiple de 6 mais cela va poser problème avec la version tel portable car je n'affiche plus que 3 blocs par lignes. J'espère qu'il existe une solution en CSS.

Si vous avez une idée.

Merci d'avance.

[Tof90]

J'ai trouvé une solution mais sans mes boites flexibles:

Code :

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

1
2
3
4
5
6
7
8
9
conteneur
{
width: 100%;
background-color:#f8f8f8;
border: 1px red solid;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(15%, 1fr));
margin: auto;
}

Çà fonctionne mais si une solution existe avec les boites flexibles je suis preneur.

[mathieu]

pourquoi vous fixez la largeur des éléments à 15 % ? c'est important pour votre mise en page ?
si vous tenez a garder cette largeur, testez "margin : auto; sur le conteneur pour ajouter des marges sur les côtés.

et sinon regardez cette page qui montre des exemples visuels de l'effet de plusieurs propriétés :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[NoSmoking]

Bonjour,

Çà fonctionne mais si une solution existe avec les boites flexibles je suis preneur.

je ne vois pas en quoi il t'est préférable d'utiliser FLEX en lieu et place de GRID qui dans ce cas de figure s'avère être le meilleur choix et ce attendu que l'effet obtenu est le bon et cela sans « bidouille », ajout d'éléments neutres, liée au fait même du rendu des éléments flexibles.