J’ai besoin d’aide avec des #CSS. J’essaie de reproduire la présentation ultra-alignée d’images carrées telle qu’on la trouve dans Photos sur l’iPhone. L’idée étant d’avoir des vignettes carrées dont la taille n’est pas totalement fixe, et si possible sans s’embêter avec les media queries usuelles selon la taille de l’écran (genre une case de largeur 25% quand on est entre 600 et 720 pixels…).
L’idée c’est que j’arrive à faire ça très bien avec une flex box :
Mais le hic, c’est la dernière ligne. Les deux premières lignes, ça fonctionne magnifiquement, les dimensions des vignettes carrées sont très bien gérées quelle que soit la largeur d’affichage, le nombre de vignettes par ligne se calcule tout seul avec « flexibilité », l’alignement est parfait. Bref le bonheur.
Mes CSS pour l’instant :
ul.carres_oeuvres {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-right: 1px;
}
ul.carres_oeuvres li {
margin-top: 1px;
margin-left: 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 150px;
}
Sauf comme tu vois, la dernière ligne, qui occupe toute la largeur mais ne s’aligne pas.
Je voudrais obtenir ceci :
Et j’ai pas trouvé comment…
