Petite astuce pour tout ceux qui galère à créer des espaces en utilisant des marges entre leurs éléments (articles, images, produits...) #css #css3 #flexbox -------------------------------- Music by Oleksii Kaplunskyi from Pixabay
Ahah bah merci à toi. Et moi aussi je l'ai découvert tardivement parce que de mémoire je connaissais pour les grilles en CSS mais pas pour flexbox. Il me semble que pour flexbox c'est arrivé après mais je ne l'utilisais pas pensant que c'était exclusivement une propriété des grilles 😅
Merci pour les tips, j'était pas au courant pour la compatibilité gap et flex si seulement j'avais su ça plus tôt 😆 ! Ta chaîne est vraiment sympa et ton setup au poil 👌Je dirais pas non à un petit tuto sur les design patterns :3 😛
Merci 😁 Tu parles du setup micro fond vert ? Pour les design pattern c'est pas spécialement prévu pour tout de suite mais ca me donne des idées, je note. En attendant tu peux regarder de ce coté. Tu trouveras peut être ton bonheur : refactoring.guru/fr/design-patterns
Cimer, 20 ans que je fais du HTML mais il faut bien se mettre à la page avec tous ces templates flex qu'on trouve partout :) J'en avais marre de voir des propriétés invalides. Je me souviens de l'époque où on était obligé de passer par des tableaux pour gérer la mise en page :D
Ahah oui les tableaux ca fait un baille oui mais heureusement qu'on a flex et grid maintenant parce qu'avec le responsive ca serait bien compliqué sans ^^
@@tutos-front-endil y avait des hacks CSS pour compenser heureusement et puis les media query ont bien aidé avec firebug mais c'est sur qu'il y a 20 ans c'était pas la même histoire, je me rappelle aussi des soucis avec toutes les vieilles versions de IE et même encore avant quand un simple hover ne fonctionnait pas correctement sur tous les navigateurs :D
@@Autoktone44 Oui ca serait compliqué maintenant sans nos nouveaux outils et si en plus on avait toujours des problèmes avec les navigateurs en plus de devoir gérer le responsive. Moi je crois que le hack qui m'avait marqué le plus était sur les inline-block avec le fameux whitespace 😆quand je ne comprenais pas d'où venait ce foutu espace alors que j'avais ni marge ni padding ^^
@@tutos-front-end même si c'est dur à appliquer quand quelque chose a un comportement anormal, il faut aussi parfois remettre en question ce qui nous parait bien fonctionner et dans ce genre de cas, on peut perdre tellement de temps si on se remet trop en question. Perso, c'est avec des librairies PDF que j'ai souvent eu des soucis de padding, margin incompréhensible. Mais d'une manière générale, les soucis viennent souvent de l'encodage et de la gestion des dates, bref, toujours des trucs qui vont pas fonctionner de toutes façons, il faut souvent trouver des alternatives ou alors faire des compromis si nécessaire. Et sinon, faire des tests façon Mastermind m'ont souvent bien aidé, autre vieille référence MDR tein qu'est ce que je dirai dans 20 ans :D !!! Bref en tous les cas, oui Flex et compagnie c'est bien, après faudrait pas non plus rendre tout ça trop générique car on en perdra le fil au bout d'un moment. Là aussi, il y a surement un compromis à trouver. Pour le reste, l'IA nous supplantera sur bien des sujets de toutes manières, mais c'est un autre sujet lol En tous les cas, au moins en informatique, on s'ennuie pas, il y a toujours des soucis à régler.
C'était la même chose pour moi, je trouvais ca tellement pratique avec les Grid, mais c'est parce que ca a été implémenté après pour flexbox il me semble. En tout cas ravis que l'astuce t'ai été utile 🙂
Oui dans certains cas. Si par exemple tu fixes la taille du conteneur, alors ca peut être intéressant un space between. Mais si elle n'est pas fixé il va tout te coller et la le gap est intéressant. En plus d'être sur de maîtriser la taille d'espacement que tu veux.
Oui possible, le but n'était pas de dénigrer open classroom qui est une très belle plateforme. Mais je rencontrais souvent des élèves qui ne l'utilisaient pas alors qu'ils avaient l'habitude d'utiliser flexbox. C'est pour cette raison que j'avais décidé de faire cette vidéo 🙂
Je ne cherchais pas ici à corrigé le problème d'écart mais juste à montrer que quand on utilise flexbox on a une propriété gap qui peut être utile pour espacer des éléments plutôt que d'utiliser la propriété margin. Et j'ai fait cette vidéo parce que j'en ai vu souvent utilisé les margins (moi le premier ^^)
super tuto! j’ai juste eu mal aux yeux quand j’ai lu children avec un s. children est un pluriel, Child est le singulier. (petite remarque anodine ! ça n’enlève rien à la qualité du tutoriel
Salut ! C'est quoi l'extension pour avoir à côté le résultat ? Car live server m'ouvre une page chrome et me montre toute la page, toi uniquement ce que tu fais ?
Vidéo très intéressante ! Cependant, la fonction gap n'existe pas sur mes fichier css, je ne sais pas si je suis le seul à rencontrer ce problème... Si vous avez une idée pour corriger ça, je suis preneur. Merci !
Merci 🙂 Gap est utilisable sur le conteneur flex, si il est bien sur le conteneur flex (autrement dit là ou vous avez mis "display : flex") et que vous avez plusieurs éléments, vous devriez retrouver cette espacement.
Ah ? My bad, j'irais revoir alors j'avais regardé juste avant de faire la vidéo et je n'avais pas vu. Mais j'ai du mal regarder. Quoiqu'il en soit j'en ai vu beaucoup ne pas connaitre cette propriété pour flexbox mais plutot pour grid. C'est pour ca que j'ai fait cette vidéo. Merci pour ton retour en tout cas :)
@@tutos-front-end en fait ils ont changé leurs cours en octobre ou novembre ça m'a fait flingue mon pourcentage de progression. De plus ils ont changé le site vitrine qui fait plus site de maintenant. Mais tu as raison gap c'est super pratique 👍
premiere vidéeo que je vois sur ta chaine et personnelement le css et le front end en général ca me FREINE a mort car je galere ( et j'ai tres peu d'idée) et quand je galere en css meme si je progresse sur un projet j'ai l'impression de jamais avancer... j'espere que tes vidéo von dédramatiser l'enfer mental que je me fait du css et du web design en general...
CSS est un langage facile dans son écriture mais très complexe dans son fonctionnement, quand on débute (et on est tous passé par là), on met souvent beaucoup de temps à comprendre pourquoi un élément réagi comme ci ou comme ca... C'est tout à fait normal, c'est comme le vélo, on au début on s'est tous pris des chutes, des plus ou moins belles ^^ et maintenant on fait du vélo sans réfléchir et certains même sur une roue, les mêmes qui tombaient lamentablement au début. CSS c'est pareil, la pratique reste la clé, à force CSS te paraitra simple 😉 Courage à toi et j'espère que mes vidéos pourront contribuer à ton apprentissage 😉
Sur de très très vieux alors. Parce qu'on est clairement sur une propriété utilisable. Un score de 96% sur Can i Use. A moins de parler de navigateur qui ne prennent pas en compte flexbox comme IE 5. Mais plus personne ne prend en compte ce genre de navigateur. Même des géants comme Amazon il me semble ne se préoccupe plus des très anciens navigateurs comme IE 5 ou IE 6. C'est une bonne chose de se poser la question de la compatibilité mais attention à ne pas aller trop loin ^^ Sinon il faut considérer flexbox comme inutilisable et bon courage. J'ai connu cette époque et je n'ai pas vraiment envie d'y retourner 😅
Je ne suis pas d'accord px - em et rem sont 3 options possibles et en fonction des cas on utilisera l'un ou l'autre. Pour les tailles de polices oui rem ou em est recommandé notamment pour l'accessibilité. Mais clairement pour des marges padding ou autre c'est une erreur ou du moins ca ne doit pas être un réflexe. En tout cas ca me donne une bonne idée pour une vidéo en fait donc merci :)
