Gallery par rapport au livre flexbox alsa

Salut,

Je suis entrain de faire un portfolio filtrable en gallery mansonry. J'ai repris le code du livre flexbox CSS3 lié au galerie image tout fonctionne bien et super tuto d'ailleur. Mais voilà j'ai une problèmatique.

Je veux le faire sous forme de portfolio filtrable et chaque image soit placé dans une div pour que je puisse mettre en hover (titre et bouton + catégorie etc relié en php...) reliant à ma page détails projet. Le problème lorsque je mets chaque image dans une div l’emboîtement de mes images ne se fait plus. Il y a t-il une solution pour réparer cela ? voici mon code:

CODE HTML

<section class="gallery">
		<div class="container-gallery">
			<img src="./assets/images/flex.png">
		</div>
		<div>
			<img src="./assets/images/flex2.png">
		</div>
		<div class="container-gallery">
			<img src="./assets/images/flex2.png">
		</div>
		<div class="container-gallery">
			<img src="./assets/images/flex2.png">
		</div>
		<div class="container-gallery">
			<img src="./assets/images/flex.png">
		</div>
		<div class="container-gallery">
			<img src="./assets/images/flex2.png">
		</div>
		<div class="container-gallery">
			<img src="./assets/images/flex.png">
		</div>
		<div class="container-gallery">
			<img src="./assets/images/flex.png">
		</div>
		<div class="container-gallery">
			<img src="./assets/images/flex2.png">
		</div>
	</section>

CODE CSS - SASS

.gallery {	    
                                margin-bottom: 54px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			.container-gallery{
				    img{
				    	width: auto;
				    	height: auto;
				    	max-width: auto;
				    	min-width: 130px;
				    	margin: 5px;
				    	object-fit: cover;
				    	flex: 1 1 auto;
			    	}	
			}
		}

Modifié par tcdev (27 Mar 2019 - 09:38)

Bonjour,

avec flexbox, les éléments flexibles sont les enfants direct de ton élément en display flex. Ici .container-gallery sont les éléments flexibles, non plus tes balises img, donc tu vas devoir déplacer une partie de tes règles css sur cet élément.

Merci beaucoup !!!