Bonjour,

Voici un problème qui se pose souvent à moi avec Flexbox, et je ne parviens pas à m'en dépatouiller. Peut-être que cela signifie que je ne dois pas user du flexbox dans ce cas-là, malgré tout je trouve ça très simple à mettre en place, et, presque à chaque fois que je m'en sers, j'ai ce problème.

Je m'explique :

Je souhaiterais que toutes les vignettes soient distribuées horizontalement sur l'espace dispo (le conteneur UL rouge), avec une légère marge entre chacune d'elles. Les dernières vignettes de la dernière ligne doivent être alignées à gauche, et non pas perdues au milieu de la ligne.

1 - Ici l'alignement est bien à gauche comme je veux, MAIS les vignettes ne sont pas distribuées horizontalement sur tout l'espace disponible, je souhaite que la marge rouge à droite n'existe pas : en effet les vignettes de droite ne s'alignent pas horizontalement avec tout le reste du site. Normal, il y a du padding aux LI puisque je ne les veux pas collés les uns aux autres.

Voici le code utilisé pour l'exemple 1 :

Html de ce type (je le simplifie car il est long avec liens instagram)

<ul>
	<li><a href=""><img src="" alt=""></a></li>
	<li><a href=""><img src="" alt=""></a></li>
	<li><a href=""><img src="" alt=""></a></li>
	<li><a href=""><img src="" alt=""></a></li>
	<li><a href=""><img src="" alt=""></a></li>
	<li><a href=""><img src="" alt=""></a></li>
	<li><a href=""><img src="" alt=""></a></li>
</ul>

Code Css :

ul {
display: flex;
flex-wrap: wrap;
background: red;
}

li {
width: 20%;
margin: 0;
line-height: 0;
padding: 0 14px 14px 0;
}

2 - Ensuite, si je change certaines propriétés, ça donne ça :

Voici le code Css utilisé pour l'exemple 2 :

ul {
display: flex;
flex-wrap: wrap;
background: red;
justify-content: space-between;
}

li {
width: 18%;
margin: 0;
padding: 0 0 14px 0;
line-height: 0;
}

Ici, la marge rouge à droite a disparu et les vignettes sont bien distribuées sur tout l'espace horizontal. Mais l'alignement horizontal des 2 dernières vignettes ne me convient pas, il doit être à gauche. De plus, les marges horizontales entre les vignettes ne sont pas égales aux marges verticales, puisque d'un côté on a des marges en px et de l'autre une width en %.

Si vous avez une idée pour résoudre ce problème, et des explications, je suis preneuse.

Merci.

Bonsoir,

Il faut que tu mettes une valeur de flex sur les enfants.

Un exemple sur lequel tu as le choix:

• alignement à gauche comme tu le souhaites
• ou bien en décommentant le text-align: center; tu centres, ce qui esthétiquement n'est pas mal non plus et a surtout l'avantage que tout est toujours à équidistance des bords du conteneur global.

*, *:before, *:after {
  box-sizing: border-box;
}

ul {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    margin: 0;
    padding: 0;
    border: 5px ridge blue;
    background: red;
}

li {
    flex: 1;
    padding: 5px;
    border: 5px outset grey;
    line-height: 0;
    list-style: none;
  
}

a {
    display: block;
    /text-align: center;
}

img {
    height:100px;
}

https://jsbin.com/cepoxov/1/edit?html,css,output

A gauche

Centré

Salut,

Solution avec flex :

https://jsfiddle.net/uesmxtb0/

Solution avec float :

https://jsfiddle.net/vx0x8Lvf/5/

Solution avec grid :

https://jsfiddle.net/th4warw1/3/

-
Edité par Syltaen 13 avril 2018 à 22:53:06

Bonjour anoushka,

je te propose une autre solution où :

• les marges horizontales et verticales sont identiques (à 2%)
• li "image" font toujours 18% du conteneur,
  ce qui veut dire que si ton conteneur est plus petit ou plus grand il en sera de même pour tes images
  utiliser les média queries
• pas de marges à droite et à gauche ni au dessus
• a voir si cela fonctionne sur tous les navigateurs

https://codepen.io/Zonecss/pen/GxbjoL