Créer une galerie responsive avec Flexbox

[@EcoleduWeb]

🎓 Tous mes cours sur l'École du Web (pour les obtenir tous d'un coup) : www.ecole-du-web.net/ 📚 Tous mes cours sur UDEMY : liste-des-cours.com/

[@Tom-jn6mk]

Merci pour le tuto clair et efficace merci beaucoup !

[@gindevgin9298]

impec! j'ai mangé pas mal de flexbox et de css grid récemment et ça va me permettre d'améliorer un de mes fichiers css! 👍

[@markb4304]

Toujours au top ! Merci Enzo !

[@gregory2156]

Un grand merci pour cette vidéo, cela va m'aider pour mon portfolio à réaliser !

[@janjak5285]

Comme d'hab video pleine d'enseignements pratiques et faciles à comprendre

[@Marie-VVV]

Merci Enzo ! Très bon sujet !

[@music-4-ever704]

Top ! Comme toujours !!!

[@devweb97]

C'est bien expliqué merci !

[@adamtomko6111]

salut et merci pour le vidéo j'ai un soucie lorsque je dimension mais mes élément se mettent entièrement en ligne je ne sais pas pour merci de bien vouloir m’expliquer

[@patriciasaccaggipats]

Merci, je me suis fait une petite galerie avec mes abstraits.

[@gohutv2792]

Bonjour, super vidéo y'aurait t'il la possibilité de mettre des hover?

[@EcoleduWeb]

Bien-sûr, simplement avec :hover ;)

[@thomasfawkes5440]

Super Merci Enzo !

[@rardoobaCode]

R.A.S toujours simple et efficace..

[@businessenligne6531]

salut ta gallerie et se que tu peut mettre des video

[@fafa92elsueno81]

Flexbox c'est la vie !

[@kiliknp5141]

c'est bien mais le gros problème des flexboxs c'est que tu ne peux pas centrer les articles et les wrapper pour des items impairs sinon ton item se cale au milieu et ne va pas se caler à gauche (si c'est ce que l'on souhaite). Tu est obligé d'enlever le justify-content: center et donc tes elements ne seront ps parfaitement centrés ou sinon faut calculer avec la taille de l'ecran pour rajouter un margin left qui le pousse vers la droite fin c'est la galère ...... sinon pour 1 ou un nombres d'items flex pairs c'est très bien

[@EcoleduWeb]

Je ne vois pas de quoi tu parles, tu as un exemple avec un codepen par exemple ? Tu peux parfaitement centrer 3 flex-items (nombre impair).

[@kiliknp5141]

@@EcoleduWeb J'arrive pas a te partager le code pen (je crois qu'il faut avoir une version payante) bref c'est pas grave admettons tu crée une flexbox de max width 1000px avec 3 items de 300px (valeur au pif) avec un wrap. Tout va bien et tu veux espacer le tout sur ta page donc tu fais un justify around (meme cas pour le center ou between je te met around vu que c'est mon chouchou), tout va bien ça centre nickel et la tu réduit l'ecran pour faire wrapper ton 3eme item, il va se caler en dessous et au centre (logique). Maintenant moi perso je me dis c'est bien beau tout ça mais je voudrais mes items espacé sur ma page MAIS qui s'enchaine de gauche à droite, et la pas possible (ou en tout cas je sais pas comment faire) vu que ça m'oblige à enlever le justify content et donc décentrer mes items. Du coup je préfére utiliser une grid.

[@kiliknp5141]

Ça ne le fait pas qu'avec des items impairs d'ailleurs je sais pas pourquoi je spécifie ça plus haut .......

[@EcoleduWeb]

@@kiliknp5141 Yep je te rejoins sur l'utilisation de Grid dans ce cas précis, c'est plus propre et plus simple. (Et codepen est gratuit pour le partage, il faut néanmoins créer un compte.)

[@mehdipailot4968]

Bonjour ! Super vidéo ! J’ai une question, comment tout bien aligné comme tu fais, quand nos images n’ont pas de base les mêmes dimensions ? Merci d’avance :)

[@EcoleduWeb]

Salut, on donne des dimensions aux images + object-fit:cover

[@mehdipailot4968]

@@EcoleduWeb alors dans le code il y’a .item{ width: 200px; heigth: 100px; } Donc je rajoute ce que tu viens de me dire dedans ?

[@EcoleduWeb]

@@mehdipailot4968 Une image à l'intérieur avec width & height à 100% + object-fit, par exemple

[@mehdipailot4968]

@@EcoleduWeb bon bah je n’y arrive pas, je suis sois nul sois j’ai pas compris

[@johantsdev6924]

Bonjour, merci pour la vidéo ! Comment fais-tu tes raccourci pour les commentaires ?

[@lemagicienannonyme7289]

ctrl + :

[@raymondferreux7716]

Salut Enzo et merci pour ce tuto. Comme tu le proposes dans cette vidéo, j'essaie (sans succès) de m'inscrire à la new-letter hebdo. Peux-tu faire quelque chose STP ?

[@EcoleduWeb]

Ce lien ne fonctionne pas ? mailchi.mp/94d9da505508/le-designer-du-web

[@raymondferreux7716]

@@EcoleduWeb Le lien fonctionne, mais il ne se passe rien derrière (pas de mail de confirmation, pas de new-letter,...). Bonne continuation.

[@EcoleduWeb]

J'envoie la prochaine newsletter demain, vous allez surement la recevoir! Et le mail de confirmation est peut-être dans les spams. Bonne continuation!

[@raymondferreux7716]

@@EcoleduWeb Non, il n'y avait rien dans les spams. J'ai re-essayé de m'inscrire en changeant d'adresse mail : remplacé mon adresse Orange par mon adresse Gmail et ça marche : j'ai reçu le mail de confirmation et l'accès au cours Les animations CSS en 9 projets. Merci pour tes réponses.

[@ascensionspirituelle7287]

Merci beaucoup ! Pourrais-tu ajouter une fonctionnalité de sorte qu'on puisse cliquer sur chaque image et l'afficher. Une sorte de diaporama ? Thanks a lot !

[@EcoleduWeb]

J'ai déjà fait des vidéos sur les fenêtres modales ;)

[@ascensionspirituelle7287]

@@EcoleduWeb Merci :D

[@stalios7722]

Salut, super tuto ! Je sais pas si tu vas répondre mais en tout cas je te pose ma question au cas ou : vaut mieux utiliser grid ou flexbox pour une galerie comme celle-ci où les images sont toutes de même dimensions ?

[@EcoleduWeb]

C'est à la préférence de chacun, les deux peuvent faire exactement la même chose dans ce cas précis.

[@stalios7722]

@@EcoleduWeb d'accord merci mais il y en a pas un qui est plus réactive que l'autre pour le navigateur ?

[@EcoleduWeb]

Non les deux sont aussi réactives ;)

[@raphaelbaar6007]

Salut Enzo. Très bonne vidéo , comme d'habitude. Je voulais savoir si les 'flex-gap' étaient déjà d'application ?? Je suis pas certain mais bon je pose quand même la question. Merci

[@EcoleduWeb]

Flex gap n'existe pas encore mais un système de gap pour flexbox est en effet en train d'être mis en place par le W3C, à voir ... :)

[@Gaulois1603]

c'est pas mieux d'utiliser grid ?

[@EcoleduWeb]

Les deux peuvent y arriver

[@salmamouhoub44]

Merci 🙂

[@soribakaba7366]

Merci beaucoup

[@kikiflores9133]

10000000000000000000000 merci a vous

[@Mskyng74]

❤

[@issaissifou4959]

Merci.

[@SIMOhani]

************

[@44aliano]

Merci à toi