Découverte du CSS : Float, Flex ou grid ?

Article ► grafikart.fr/t...
Abonnez-vous ► bit.ly/Grafika...
Dans ce tutoriel nous allons faire le point sur les différentes méthodes de placement des éléments et leur cas d'utilisation.
Soutenez Grafikart:
Devenez premium ► grafikart.fr/p...
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/t...

[@mariusdev]

Merci meilleure formateur français. l’Afrique te remercie tu aides tellement les développeurs africains ! Longue vie à toi merci 🙏 ❤️

[@bled72]

Wesh calmes toi l'ami. Arrêtes de parler au nom des africains

[@mariusdev]

@@bled72 toi tu es juste un ingrat alors ! A cause de grafikart tu sais pas tt ce que je sais faire dans le domaine actuellement donc je parle de la majorité.

[@bled72]

Je ne dis qu’il fait pas du bon boulot. Mais doucement avec les courbettes. Au pire parles pour toi, ne parles pas au nom des « développeurs africains ».

[@mariusdev]

@@bled72 la liberté d’expression tu connais ? Bon aller bonne journée

[@1conscience0dimension]

@@bled72 c'est du mimétisme, ça ne reflète absolument pas la réalité. Tu connais l'expérience de Milgram... Ce n'est pas rendre honneur à l'auteur que de perdre tout sens critique. Mais je pense que celui est conscient de ses lacunes, plus que ne le sont la plupart de ceux qui commentent.

[@vivianmingaud7942]

Comme d'habitude, extrêmement clair et précis ! Merci beaucoup pour ton altruisme

[@___Kevin]

Merci Grafikart. Vous avez le talent technique et pédagogique.

[@silvereledev]

J'ajoute immédiatement cette vidéo à mes favoris ! MERCI pour l'initiative 💜

[@grafikart]

Mangaflix est un bon cas d'utilisation du display grid :D

[@saucisse_dev]

Là c'est pas possible je vais croire que t'es un cyborg à force... Hallucinant de fournir autant de contenu qualitatif + bosser en même temps O_O

[@florianm22]

Il y a aussi le futur CSS Grid Masonry qui va permettre de créer des sortes de grilles flexibles sur une dimension, comme l'affichage que l'on a sur Pinterest.

[@tancraftwork]

comme toujours, video au top avec explications très claires même si on pense bien connaitre les propriétés en question, encore merci infiniment pour tout ce que vous apportez.

[@joemayinzimukawa8871]

Le grid est puissant par sa nature multidirectionnelles mais un peu complexe je pense qu'il faut l'utiliser à des positions complexes et quand on veut gérer toutes les directions (Verticale et horizontale), le Flexbox est très intéressant et facile à mettre en place quand on travaille sur des positionnements simple à une seule direction soit vertical ou horizontal jamais les deux à la fois, pour Float personnellement j'ai pas eu à l'utiser sur des positionnements complexes juste je m'en sers peut être positionner un élément enfant de type inline à droit ou à gauche de son parent mais l'utiser dans des trucs comme la navBar, la Sidebar ou des blocks je ne trouve pas nécessaire. Merci pour cette vidéo Cher Jonathan

[@grafikart]

Oh très bonne manière de voir les choses (le côté 2 dimensions). Je le réutiliserais pour expliquer ça la prochaine fois qu'on me demandera.

[@luigivampabbcw5172]

Au top ! T'es le meilleur Grafikart merci pour ce que tu fais pour la communauté !

[@fylip22b]

Bonjour et merci pour cette approche comparative. Ce que j'ai retenu est que c'est en fonction de qui décide (parent ou enfant) que le choix technique est fait. Philippe P.

[@AmarExplorer]

J'aime et je trouve le concept intéressant de faire des vidéos courtes

[@TomCodeur]

Grafikart, la machine à tuto ! Merci ;)

[@mohamadou.mouktar]

🙏 Merci beaucoup pour les éclaircissements. Toujours au top 👌

[@vicktorzakrecords2625]

Float flex ou grid ? Floaexgrid est la solution !

[@axelpaillaud7542]

Merci Grafikart, c'est super clair

[@ulrichnelson3636]

Toujours aussi intéressant, merciii pour tout ton temps consacré

[@emmanuelghomsighomsi2340]

Excellente vidéo comme d'habitude. Merci!

[@martinienfokoue7056]

yes ohhh

[@Arkounay]

Cé bon lé gars g trouvé la technique, mettez tout en position absolute et mettez un breakpoint pour chaque pixels (seulement 2000 breakpoints suffisent pour généralement) pour avoir un contrôle total sur ce que vous faites 😎

[@luffystars3841]

Merci pout la technique 👍🤭 une solution rapide et peu chronophage 👍

[@Maxxamande]

😂

[@_Greenflag_]

salut @grafikart, j'ai une idée de vidéo. Serait-ce possible de faire une vidéo sur comment tu stylises les (liste) ? Comme tu le sais, pas moyen à l'heure actuelle de changer cela en CSS (car défini par l'OS). L' équipe de Chrome et celle d'Edge sont en train de travailler sur un élément similaire, le qui sera entièrement stylisable. En attendant, comment t'en sors-tu pour styliser les ? J'ai vu des solutions en ligne, mais en 300 ou 400 lignes de code, CSS + JS. Merci 💚

[@thierryvm]

Vraiment au top comme explication :)

[@salimitenga8847]

Bonsoir monsieur le grand formateur merci beaucoup pour vos formations qui sont très très bien explique .je voulais juste vous demande si vous pouvez nous aider à réaliser un tutoriel sur les applications multi platforms comment réaliser ses gerre d’applications .le jour où vous serai libre encore une fois merci vraiment

[@codeapick]

Super cours ^^

[@OualidSOBHI]

Merci pour ce REX intéressant et pratique

[@command_maker6]

Salut très bonne vidéo. Pour ta caméra ça serait sympa je pense de la mettre comme tu faisais sur tes lives, en rond (border-radius: 50%; 😉). Parce que la elle cache du texte à certains moments

[@grafikart]

Ah c'est une bonne remarque, je ferais ça la prochaine fois que j'ai une webcam pendant les présentation.

[@tamsirndao]

Merci frère. Good job

[@sorrow_io]

Elle est jolie ta cuisine, plus que les zones des slides qui n'ont pas été affiché :P. Kappa Kappa

[@djevieloyale7284]

bonjour si possible je voudrais avoir un cours sur la création du backoffice d'un site e-Commerce svp

[@gobajoseph5064]

Hyper bien expliqué pour l'instant j'utilise les flexbox je trouve les grids un peu casse tête.

[@command_maker6]

C’est vrai que c’est casse tête mais c’est super puissant pour des design complexes

[@gobajoseph5064]

@@command_maker6 effectivement

[@didier..n..1567]

Bonjour simple question peut on intégré du grid et le flexbox.. ensemble et dans quel contexte.

[@Maxxamande]

Tu peux complètement. Par exemple tu va avoir le gros de la découpe de tes div en grid, et un de ses enfants peut parfaitement être en flex à l’intérieur pour des raisons de simplicités.

[@Jonathan-ny9wt]

Merci pour cette vidéo, je commence tout juste et j'aimerais savoir s'il est possible de faire des menus déroulants avec Grid ?

[@Maxxamande]

Le grid c’est pour du positionnement. Pour du menu déroulant je le fais en js

[@Jonathan-ny9wt]

@@Maxxamandemerci beaucoup pour l'information

[@Matrix92100]

Mrc bcp❤️🤲

[@emilie1977]

7:19 pourquoi width est calc(25% - 30px /4)? et pas seulemnt 25% - 10px?

[@grafikart]

Car ti tu as 3 colonnes tu as 3 espaces de 10px entre les colonnes, donc tu as 30px que tu dois distribuer dans 4 colonnes

[@progradevlo1515]

jusqu’à combien un bon développeur indépendant peut gagner ?

[@grafikart]

Il n'y a pas de chiffre, cela dépend de son temps de travail et ce quel est son activité.

[@emelinepal]

Merci ! Je vais arrêter de mettre du flex partout haha

[@_Greenflag_]

Restons flexible : )

[@codeur13]

Merci

[@libressence31]

C'est une erreur de dire aux devs front de faire leur flex, grid layout eux-mêmes. Les gabarits de pages web sont essentiels et trop importants pour les laisser à l'appréciation des devs front. Dans les fait, les devs font n'importe quoi avec ces valeurs css et les gabarits, au lieu d'être standardisés pour tous les projets de l'entreprise, ils sont mal fait. Privilégiez plutôt un gabarit fair pour tous les projets de la boite fondés sur un fork de bootstrap par ex. les grilles (12 pour le desktop) sont très biens faites. Les éléments de page ainsi que les pages elles-mêmes seront harmonisés et standardisés. JB

[@tcgvsocg1458]

super video dommage de te voir pendant toute la video j aimais bien avant quand tu disparaissait au bout de 15secondes c'est plus clair ça rend mieux a limage

[@grafikart]

Cela dépend des vidéos, là vu qu'on est plus dans le format "présentation" je préfère laisser l'image pour avoir du mouvement plutôt que des longues images fixes. Pour les cas où il y a plus de code ça ne changera pas ;)

[@isalainkonankouakou2827]

Je veux échanger avec vous svp

[@grafikart]

Il y a le formulaire de contact sur le site pour cela ou le tchat grafikart.fr/tchat

[@ta_pls8767]

Merci

[@kanote6705]

Merci

[@excellenztechnique7002]

merci