FlexBox Tutorial - CSS Tutorial to Learn and Understand Flexbox in 12 Minutes

Поділитися
Вставка
  • Опубліковано 7 лют 2025

КОМЕНТАРІ • 120

  • @Diogene-pl1lq
    @Diogene-pl1lq Рік тому +9

    Bonsoir et merci! J'ai galéré toute la journée avec des boxs qui n'en faisaient qu'à leur tête et ne voulaient pas s'encastrer parfaitement dans un container! Et elles sont têtues ces bêtes là!
    Rien n'arrive sans doute par hasard, je suis tombé sur votre tuto et j'ai absolument apprécié l'aide et les savoir-faire que vous prodiguez avec un talent pédagogique affirmé. Demain sera un autre jour et je les mettre en boîte mes bêbêtes!
    Bien à vous

    • @tutos-front-end
      @tutos-front-end  Рік тому +1

      Oui elles sont capricieuse au début ces ptites box mais une fois qu'on les a apprivoisé elles sont adorables 😅
      Merci en tout cas pour votre retour 😉

  • @gregoryly45
    @gregoryly45 3 місяці тому +5

    Je suis en haute école en développement et si mon prof avait expliqué aussi bien que cette vidéo, je n’aurais eu aucun soucis de compréhension.
    Merci pour cette vidéo 😊

  • @jlbiah
    @jlbiah 11 місяців тому +1

    Ça fait des années que je bricole avec flex et grid et tes 2 vidéos sur le sujet m'ont permis de mettre tout au clair dans ma tête.
    Merciii 👌

    • @tutos-front-end
      @tutos-front-end  11 місяців тому

      J'en suis ravis. Merci pour ton retour 😊

  • @dominiquestephan7885
    @dominiquestephan7885 Рік тому +4

    J'avais besoin d'un coup de pouce pour les flexbox. Ta vidéo est apparue dans mes recherches sur google à point nommé. Clair et précis. Tes explications sont pertinentes. Merci, un abonnement de plus!

    • @tutos-front-end
      @tutos-front-end  Рік тому +1

      Merci ! Tu as le même genre de vidéo sur CSS Grid sur ma chaine si besoin 😉
      J'ai vu que ça plaisais ce genre de format alors j'essaierai d'en faire davantage

  • @vincentfaridmaalem2287
    @vincentfaridmaalem2287 11 місяців тому +2

    Milles merci. Je comprends mieux avec vous qu'avec mes profs.

  • @ricco1347
    @ricco1347 Рік тому +1

    Je suis un débutant en code et franchement, j'ai été
    sur plusieurs tutos et j'avais du mal à comprendre malgré tout !
    Ton cours sur Flexbox ^^ et bien : j'ai tout compris tu expliques très bien, Merci !!

  • @yoyo26-34
    @yoyo26-34 Рік тому +1

    Hello, tout d'abord merci pour cette video qui explique (enfin) clairement les propriétés à appliquer au container ou aux autres. je ne sais pas si cela a été écrit dans les commentaires, mais pour avoir les numéros alignés au centre des items, il faut ajouter dans la classe .item que c'est un display flex (aussi) et donc jouer avec align-items et justify-content. J'ai trouvé cela tout seul grâce à... votre tuto !!! Merci encore

    • @tutos-front-end
      @tutos-front-end  Рік тому +1

      Oui en effet je crois ne pas avoir expliqué pour les nombres parce qu'ils ne me servaient qu'en repères pour la vidéo. En tout cas merci pour ton retour et ton commentaire, je suis content d'avoir pu t'aider 😉

  • @fmive56
    @fmive56 Рік тому +3

    Un grand merci d'avoir commencé par expliquer de faire la différence entre le conteneur et ses enfants, qu'est-ce que j'ai pu galérer avec çà 😉

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Merci à toi pour ton commentaire, en effet ca et bien comprendre le principe des axes c'est super important avec flexbox. Content d'avoir pu t'aider 😊

  • @assiabensaada1852
    @assiabensaada1852 Рік тому +1

    Grace à cette vidéo j'ai réglé mon site je vous remercie infiniment

    • @tutos-front-end
      @tutos-front-end  Рік тому +1

      Ah trop bien 😃
      Content que ca t'ai été utile 😉

  • @nathanbayoro2376
    @nathanbayoro2376 24 дні тому

    Ce que tu as fait est super vraiment merci beaucoup, et aussi merci pour le tuto

  • @pascalfauvy7062
    @pascalfauvy7062 Рік тому +3

    Je découvre ta chaine avec plaisir. J'étais un éternel débutant mais là je m'y met sérieusement et ton approche est cool ! C'est bien simple : j'en redemande !!!

    • @tutos-front-end
      @tutos-front-end  Рік тому +3

      Oh merci beaucoup ! 😀
      Courage dans ton apprentissage, la clé c'est de pratiquer, vraiment. C'est cliché mais à force de pratiquer tu seras plus à l'aise et donc tu pourras de plus en plus facilement exprimer tes idées sans bloquer sur la technique. Et quand ca fait ca c'est vraiment là que tu prends ton pied :) Je suis aussi passé par là, alors courage 😉

  • @regisrobart998
    @regisrobart998 Рік тому +2

    Tu es un excellent pédagogue, j'ai enfin bien compris le Flexbox, vraiment Top !. Merci.

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Un grand merci pour ton retour, ca fait plaisir 🙂

  • @hichemmansouri8930
    @hichemmansouri8930 Рік тому

    tu est clair , concis et tu vas a l'essentiel; de toute les vidéos que j'ai vu sur la flexbox tu est le plus précis. merci

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Merci beaucoup ! 😊 Je prévois de faire une vidéo sur CSS GRID dans le même format justement 😉

    • @hichemmansouri8930
      @hichemmansouri8930 Рік тому +1

      @@tutos-front-end ah ben je me posais la question justement, c'est une très bonne idée. Hâte de voir ça.

  • @Syfrost
    @Syfrost Рік тому +2

    Découvert ta chaine tout récemment et en tant que débutant avec quelques bases, franchement c'est super bien expliqué. tu va a l'essentiel, c'est visuel on comprend vite 👍Merci

    • @tutos-front-end
      @tutos-front-end  Рік тому +2

      Ah merci ca fait plaisir, c'est exactement l'effet que je recherche alors ton retour m'encourage à continuer sur cette voie ! Un grand MERCI ! 😊

  • @sean-gs
    @sean-gs Рік тому +1

    Vidéo super quali ! PS: l'élément "gab" pépite 👌 !

  • @metalftoid
    @metalftoid 10 місяців тому +1

    une autre très bonne vidéo, un travail de pédagogie incroyable. Merci

  • @DEVWEBKOFFI
    @DEVWEBKOFFI 8 місяців тому +2

    Ce tuto m'a beaucoup fait gagné du temps. Merci beaucoup !!!

    • @tutos-front-end
      @tutos-front-end  7 місяців тому +1

      Tant mieux, c'était le but 😊 Merci à toi pour ton retour 😉

  • @lorenzolamas534
    @lorenzolamas534 3 місяці тому +1

    Concis et genial ! Bien mieux que ce qui m'est expliqué dans ma formation du cpf !!! Tu devrais deja etre formateur dans une de ces ecoles ou leur pedagogie est nulle !!

  • @dje33
    @dje33 Рік тому +1

    Merci pour ce tuto.
    C'est parfait.
    Il y a une petit coquille dans le sommaire.
    fkex-direction au lieu flex-direction.

  • @hkmhkm-y4r
    @hkmhkm-y4r Рік тому +1

    Merci pour ce cours j'ai personnellement aimé juste parceque vous avez parlé en générale de tout sur flexbox. Un pouce bleu pour vous

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Merci pour le pouce et surtout pour ton commentaire 😊

  • @KELENTISGROUP
    @KELENTISGROUP 4 години тому

    Super cours. Merci beaucoup

  • @GDevWeb
    @GDevWeb 9 місяців тому

    Merci, c'est une bon rappel. je ne faisais que du back depuis quelques mois et j'ai comme qui dirait oublier 😬

    • @tutos-front-end
      @tutos-front-end  9 місяців тому

      Ahah oui on peut oublier vite mais heureusement ça revient vite également 😁

  • @CabrelAngeboyz-gw9hf
    @CabrelAngeboyz-gw9hf Рік тому +1

    Merci Monsieur enfij une vidéo simple mais qui explique beaucoup 🙏🏾

  • @lesvoixsonttropbruyantes
    @lesvoixsonttropbruyantes 7 місяців тому

    Très bonne vidéo, complète et concise . Un conseil, diversifie ton contenu en commencent ta série de letsplay sur Endle Ring

  • @yannbonnin997
    @yannbonnin997 6 місяців тому

    Top ! Ça va un peu vite au premier coup, mais l'avantage, c'est qu'on peut très vite revenir sur chaque fonctionnalité… Et s'essayer !

    • @tutos-front-end
      @tutos-front-end  6 місяців тому

      J'ai fait cette vidéo dans ce but. J'imaginais cette vidéo pour ceux qui ont eu une première approche avec Flexbox et qui ont galéré. Le but c'est d'aider à comprendre le fonctionnement de Flexbox et qu'on puisse mettre cette vidéo dans un coin et y revenir quand on a besoin 😉

  • @msosm2726
    @msosm2726 Рік тому +1

    Très bien expliqué, je te remercie

  • @elcondorito8823
    @elcondorito8823 20 днів тому

    Le tuto parfait ! Je m'abonne !

  • @Nico_de_Normandie
    @Nico_de_Normandie 8 місяців тому

    Merci à toi et ta pédagogie ! Un Rouannais ❤

    • @tutos-front-end
      @tutos-front-end  8 місяців тому

      Merci à toi également confrère Normand😊

  • @Kishiro-no1qh
    @Kishiro-no1qh 9 місяців тому

    Je t’adore, tu peux pas savoir à quel point à chaque fois je ne savait pas si je devait mettre les display dans le container ou items 😭

    • @tutos-front-end
      @tutos-front-end  9 місяців тому +1

      Ahah merci, content d'avoir pu t'aider à y voir plus clair 😊

  • @ChristianMVULATUNGILA
    @ChristianMVULATUNGILA 11 місяців тому

    Merci beaucoup pour tes explications. Tu restes le plus pédagogues. Est-ce possible d'avoir une vidéo où tu construis un site basic en HTML et CSS?. Je te remercie d'avance.

    • @tutos-front-end
      @tutos-front-end  11 місяців тому

      Ca se pourrait que ça arrive sur la chaine un jour oui 😉

  • @Lyvan-g1r
    @Lyvan-g1r Рік тому +2

    sinon merci super tuto 😉

  • @francktiomela3002
    @francktiomela3002 Рік тому +1

    J'ai vraiment aimé 😊, MERCI

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Ah bah merci pour ton retour. Ca fait plaisir 😀

  • @KP-uk2hu
    @KP-uk2hu 10 місяців тому

    Le CSS est un cauchemar pour moi, je saisis aisément la logique de base, mais je galère comme un dingue à l'appliquer. Mais bon, comme je suis actuellement en formation diplômante, ça va aller à son rythme.

    • @tutos-front-end
      @tutos-front-end  10 місяців тому

      Le secret c'est de toujours pratiquer un maximum, à un moment donné tu ne réfléchiras plus quand tu coderas. Par exemple fait un mini exo de 30min chaque jours et tu verras déjà une différence au bout d'un mois 😉

    • @KP-uk2hu
      @KP-uk2hu 10 місяців тому

      @@tutos-front-end Auriez-vous des sites web pour ce genre d'exercice, si ça ne vous dérange pas ?

  • @ludovicvasseur9278
    @ludovicvasseur9278 Рік тому +1

    vraiment une super vidéo. MERCI

  • @dufresneali
    @dufresneali Рік тому +1

    Merci beaucoup pour ce partage, du temps passé pour cette vidéo.
    Un peut rapide pour moi, mais merci pour le découpage en chapitre un plus pour les personnes comme moi. Je comprend vite mais il faut m'expliquer longtemps. Alors autant le dire j'apprécie ce geste d'attention. Et comme @pascalfauvy7062 moi aussi je fait partie des éternels apprenant.

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Un grand merci pour ton retour 😊 Je suis content de voir que ma vidéo t'as aidé 🙂 Et ne tu sais on est tous d'éternels apprenants, dans notre domaine ce serait dangereux de penser qu'on n'a plus besoin d'apprendre 😉

  • @karimDellaji-l4i
    @karimDellaji-l4i Рік тому +1

    Un grand grand merci.

  • @astucespartiques3125
    @astucespartiques3125 6 місяців тому

    Merci, tout est clair ❤

  • @Prodbyride
    @Prodbyride Рік тому +1

    Adoré,je fonce sur le site que tu conseilles en fin de vidéo

  • @DEVWEBKOFFI
    @DEVWEBKOFFI 8 місяців тому

    Merci beaucoup monsieur 🙏🙏🙏🙏🙏🙏🙏🙏

  • @bibiderennes
    @bibiderennes Рік тому

    Merci ! Clair et bon rythme 👍

  • @uthentic44
    @uthentic44 Рік тому +1

    j'aime bien ta technique de faire ,contunie comme ca👍

  • @christianbyamo9988
    @christianbyamo9988 Рік тому +1

    L'explication est vraiment très claire et je t'en remercie.
    J'ai une inquiétude, comment faire sur un container ayant au moins 5 items pour deplacer un seul item à gauche du début de la ligne et les autres (4 items) restants tous à droite !?
    Je serais ravis d'avoir une réponse !

    • @tutos-front-end
      @tutos-front-end  Рік тому +1

      Honnêtement je ne suis pas sur de comprendre la disposition vraiment mais si j'ai bien compris tu veux qu'un élément choisi au hasard puisse se caler sur la gauche alors que les autres sont à droite. Clairement je te dirais de partir sur une disposition avec plusieurs conteneur flex mais j'imagine que cet élément à gauche tu ne peux pas savoir à l'avance lequel c'est. Donc en gros il faut faire un truc un peu tricky avec un wrap-reverse et un order sur un élément. Je ne vais pas expliquer là en commentaire donc je t'ai fait ca sur un codepen je te laisse l'analyser 😉
      Tu changes la valeur dans "nth-child(valeur)" pour choisir quel élément se placera sur la gauche. Voilà le codepen que j'ai fait (vite fait donc c'est moche tu m'en voudras pas ^^) : codepen.io/rpalfray87/pen/RwqEYPe
      J'espère que ca pourra t'aider 😉

  • @nico77
    @nico77 Рік тому +1

    super ! Merci pour la vidéo

  • @thomascarre
    @thomascarre Рік тому

    Super tuto comme d'habitude 👍

  • @heiariim.1205
    @heiariim.1205 Рік тому +1

    Merci chef

  • @youneskaddi7907
    @youneskaddi7907 20 днів тому +1

    excellent

  • @MalcolmLomacx1111
    @MalcolmLomacx1111 2 місяці тому

    Merci 👍👍🙏

  • @nfallybodian5001
    @nfallybodian5001 Рік тому +1

    Superbe . Je souhaiterais vous avoir comme mentor

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Un jour peut être, je prévois de mettre ca en place, mais j'ai des formations à sortir avant 😉

  • @StephaneFodjo-p7l
    @StephaneFodjo-p7l Рік тому +1

    j'ai adorer, je m'abonne direct, merci et continue comme ça

  • @nathanbayoro2376
    @nathanbayoro2376 24 дні тому

    C'est super bien expliqué bro merci Mais si tu pourrais y ajouter un peu de blague parcequ'un cour continu sans petit break , c'est fatiguant

  • @willfriedtouani4022
    @willfriedtouani4022 11 місяців тому +1

    Merci prof

  • @arnaudnavarre4811
    @arnaudnavarre4811 Рік тому

    Bonsoir, excellentes vidéos, très explicite, une petite question ; dans les items peut-on mettre du texte et importer des images et se servir de ces blocs? comme pour la présentation d'un CV ? merci à vous :)

    • @tutos-front-end
      @tutos-front-end  Рік тому +1

      Oui évidemment, c'est là tout l'intérêt. Flexbox permet de mettre en page des éléments, les items peuvent être n'importe quel type de balise et contenir également tout type de balise html ( etc). Flexbox est juste un outil de mise en page de vos éléments html ;)

    • @arnaudnavarre4811
      @arnaudnavarre4811 Рік тому

      @@tutos-front-end merci beaucoup, je débute en solo ,et ce n'est franchement pas facile, il me manque une méthode d'apprentissage, je viens de commencer HTML5 et CSS3, quand on arrive à la disposition pour la création d'un CV, c'est galère : )

    • @tutos-front-end
      @tutos-front-end  Рік тому +1

      Bon courage, la clé c'est la persévérance, j'espère que les vidéos sur la chaîne t'aideront 😉

  • @billydaekam9150
    @billydaekam9150 9 місяців тому

    superbe

  • @damiendelaporte6765
    @damiendelaporte6765 4 місяці тому

    Très bien

  • @badeorne411
    @badeorne411 11 місяців тому

    Merci.

  • @wilfriedjean4164
    @wilfriedjean4164 9 місяців тому

    très pédagogique

  • @marcelehuyambianguessan5510
    @marcelehuyambianguessan5510 11 місяців тому +1

    le contenu est pluqtot lourds

    • @tutos-front-end
      @tutos-front-end  11 місяців тому

      Lourd comme l'éléphant de PHP sur ton logo ?

  • @شعالمغرب
    @شعالمغرب Рік тому +2

    Done

  • @Lyvan-g1r
    @Lyvan-g1r Рік тому +7

    Pour les gros débutant lol comme moi lol n'oublier pas de mettre le container parent à 100vh sinon le align-items : center; ne prendrat pas effet lololol

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Merci pour ton retour constructif 😉

    • @Alexsan_le_vrai
      @Alexsan_le_vrai 4 місяці тому

      Dvh*** pour les écrans d'iPhone qui peuvent rétracter leur bordure sur l'axe y

  • @mahmoud-i1p
    @mahmoud-i1p 10 місяців тому

    merci pour la video mais s'il te plais esque tu peut nous partager les fichier

  • @leonnidaasyoutube9430
    @leonnidaasyoutube9430 3 місяці тому

    Bonjour,
    Comment faire pour que la page web change en direct svp ?

  • @ricco1347
    @ricco1347 Рік тому

    Tu en a d'autres du même genre que Flexbox, (HTML, CSS, JavaScript, Python-React, et peut-^tre sur My SQL, etc???) sans vouloir abusé 😅

    • @tutos-front-end
      @tutos-front-end  Рік тому

      Tu peux regarder sur la chaine oui, il y a une vidéo du même genre sur CSS Grid par exemple 😉

  • @pythagorfpv
    @pythagorfpv 3 місяці тому

    tu mets en miniature un layout impossible a atteindre avec flexbox, du moins avec ta vidéo, je suis venue pour ca, c'est littéralement du putaclick, Néanmoins, la vidéo reste intéressante,...