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

Ғылым және технология

FlexBox - CSS Tutorial to Learn and Understand Flexbox in 12 Minutes
00:00 Introduction
00:28 display: flex
01:16 flex-direction
02:11 justify-content
03:05 align-items
03:55 Understanding justify-content & align-items
04:50 flex-wrap
05:27 align-content
06:23 gap
07:00 align-self
07:35 order
08:19 flex-grow
10:04 flex-shrink
10:47 flex-basis
12:04 flex
12:19 margin: auto with flex
12:35 Flex Froggy"

Пікірлер: 108

  • @Diogene-pl1lq
    @Diogene-pl1lq8 ай бұрын

    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

    8 ай бұрын

    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 😉

  • @dominiquestephan7885
    @dominiquestephan78859 ай бұрын

    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

    9 ай бұрын

    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

  • @jlbiah
    @jlbiah4 ай бұрын

    Ç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

    4 ай бұрын

    J'en suis ravis. Merci pour ton retour 😊

  • @DEVWEBKOFFI
    @DEVWEBKOFFIАй бұрын

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

  • @tutos-front-end

    @tutos-front-end

    Ай бұрын

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

  • @fmive56
    @fmive56 Жыл бұрын

    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 😊

  • @pascalfauvy7062
    @pascalfauvy7062 Жыл бұрын

    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

    Жыл бұрын

    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 😉

  • @Syfrost
    @Syfrost Жыл бұрын

    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

    Жыл бұрын

    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 ! 😊

  • @yannbonnin997
    @yannbonnin99720 күн бұрын

    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

    18 күн бұрын

    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 😉

  • @regisrobart998
    @regisrobart998 Жыл бұрын

    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 🙂

  • @ricco1347
    @ricco13475 ай бұрын

    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 !!

  • @tutos-front-end

    @tutos-front-end

    5 ай бұрын

    Merci et bienvenue 😉

  • @vincentfaridmaalem2287
    @vincentfaridmaalem22875 ай бұрын

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

  • @tutos-front-end

    @tutos-front-end

    5 ай бұрын

    Merci ça fait plaisir 😊

  • @lollipoop60
    @lollipoop60 Жыл бұрын

    Merciiii ça m'a complètement débloqué les zones de flou que j'avais! :D

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Ah super ! 🙂 Content d'avoir pu t'aider😉

  • @astucespartiques3125
    @astucespartiques31259 күн бұрын

    Merci, tout est clair ❤

  • @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

    Жыл бұрын

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

  • @metalftoid
    @metalftoid4 ай бұрын

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

  • @tutos-front-end

    @tutos-front-end

    4 ай бұрын

    Merci à toi 😊

  • @jeromealtariba7339
    @jeromealtariba73397 ай бұрын

    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

    7 ай бұрын

    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 😉

  • @GDevWeb
    @GDevWeb3 ай бұрын

    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

    3 ай бұрын

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

  • @msosm2726
    @msosm2726 Жыл бұрын

    Très bien expliqué, je te remercie

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Merci à toi ☺

  • @user-gf2kz3lb2v
    @user-gf2kz3lb2v Жыл бұрын

    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 😊

  • @Nico_de_Normandie
    @Nico_de_Normandie2 ай бұрын

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

  • @tutos-front-end

    @tutos-front-end

    Ай бұрын

    Merci à toi également confrère Normand😊

  • @assiabensaada1852
    @assiabensaada18528 ай бұрын

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

  • @tutos-front-end

    @tutos-front-end

    8 ай бұрын

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

  • @sean-gs
    @sean-gs Жыл бұрын

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

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Merci Sean 😉 Ca fait plaisir

  • @ludovicvasseur9278
    @ludovicvasseur92789 ай бұрын

    vraiment une super vidéo. MERCI

  • @tutos-front-end

    @tutos-front-end

    8 ай бұрын

    Merci à vous 😊

  • @user-po5kn4sy9i
    @user-po5kn4sy9i6 ай бұрын

    Un grand grand merci.

  • @tutos-front-end

    @tutos-front-end

    6 ай бұрын

    Avec plaisir :)

  • @bibiderennes
    @bibiderennes Жыл бұрын

    Merci ! Clair et bon rythme 👍

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Merci à toi pour ton retour 😊

  • @francktiomela3002
    @francktiomela3002 Жыл бұрын

    J'ai vraiment aimé 😊, MERCI

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Ah bah merci pour ton retour. Ca fait plaisir 😀

  • @CabrelAngeboyz-gw9hf
    @CabrelAngeboyz-gw9hf6 ай бұрын

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

  • @tutos-front-end

    @tutos-front-end

    5 ай бұрын

    Avec plaisir 😊

  • @thomascarre
    @thomascarre Жыл бұрын

    Super tuto comme d'habitude 👍

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Encore merci 🙂

  • @nico77
    @nico77 Жыл бұрын

    super ! Merci pour la vidéo

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Avec plaisir😊

  • @dje33
    @dje338 ай бұрын

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

  • @tutos-front-end

    @tutos-front-end

    8 ай бұрын

    Oh oui merci c'est bien vu. C'est corrigé 😉

  • @DEVWEBKOFFI
    @DEVWEBKOFFIАй бұрын

    Merci beaucoup monsieur 🙏🙏🙏🙏🙏🙏🙏🙏

  • @tutos-front-end

    @tutos-front-end

    Ай бұрын

    Merci à vous 😉

  • @lesvoixsonttropbruyantes
    @lesvoixsonttropbruyantesАй бұрын

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

  • @tutos-front-end

    @tutos-front-end

    Ай бұрын

    Endle Ring sur ma chaine ? ^^

  • @lesvoixsonttropbruyantes

    @lesvoixsonttropbruyantes

    Ай бұрын

    @@tutos-front-end oui, allé hop hop

  • @Kishiro-no1qh
    @Kishiro-no1qh3 ай бұрын

    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

    2 ай бұрын

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

  • @user-jd7er7vp1q
    @user-jd7er7vp1q8 ай бұрын

    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

    8 ай бұрын

    Merci pour ton retour constructif 😉

  • @heiariim.1205
    @heiariim.12059 ай бұрын

    Merci chef

  • @tutos-front-end

    @tutos-front-end

    8 ай бұрын

    De rien 😉

  • @uthentic44
    @uthentic44 Жыл бұрын

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

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Merci ca fait plaisir 🙂

  • @billydaekam9150
    @billydaekam91502 ай бұрын

    superbe

  • @tutos-front-end

    @tutos-front-end

    2 ай бұрын

    Merci

  • @badeorne411
    @badeorne4114 ай бұрын

    Merci.

  • @tutos-front-end

    @tutos-front-end

    4 ай бұрын

    De rien 😉

  • @willfriedtouani4022
    @willfriedtouani40225 ай бұрын

    Merci prof

  • @tutos-front-end

    @tutos-front-end

    5 ай бұрын

    De rien 😊

  • @Selimbeats
    @Selimbeats Жыл бұрын

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

  • @tutos-front-end

    @tutos-front-end

    Жыл бұрын

    Merci ca fait plaisir :)

  • @user-ey1kk4kx7u
    @user-ey1kk4kx7u5 ай бұрын

    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

    5 ай бұрын

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

  • @KP-uk2hu
    @KP-uk2hu4 ай бұрын

    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

    3 ай бұрын

    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

    3 ай бұрын

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

  • @user-jd7er7vp1q
    @user-jd7er7vp1q8 ай бұрын

    sinon merci super tuto 😉

  • @tutos-front-end

    @tutos-front-end

    8 ай бұрын

    De rien et merci

  • @wilfriedjean4164
    @wilfriedjean41642 ай бұрын

    très pédagogique

  • @tutos-front-end

    @tutos-front-end

    2 ай бұрын

    Merci😊

  • @nfallybodian5001
    @nfallybodian50019 ай бұрын

    Superbe . Je souhaiterais vous avoir comme mentor

  • @tutos-front-end

    @tutos-front-end

    8 ай бұрын

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

  • @user-kk6gt2mi4i
    @user-kk6gt2mi4i10 ай бұрын

    Done

  • @christianbyamo9988
    @christianbyamo9988 Жыл бұрын

    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

    Жыл бұрын

    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 😉

  • @marcelehuyambianguessan5510
    @marcelehuyambianguessan55105 ай бұрын

    le contenu est pluqtot lourds

  • @tutos-front-end

    @tutos-front-end

    5 ай бұрын

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

  • @user-mt9kh3zl4b
    @user-mt9kh3zl4b3 ай бұрын

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

  • @arnaudnavarre4811
    @arnaudnavarre48116 ай бұрын

    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

    6 ай бұрын

    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

    6 ай бұрын

    @@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

    6 ай бұрын

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

  • @ricco1347
    @ricco13475 ай бұрын

    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

    5 ай бұрын

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

  • @user-fb6nm4ks5d
    @user-fb6nm4ks5d6 ай бұрын

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

  • @tutos-front-end

    @tutos-front-end

    6 ай бұрын

    Merci et bienvenue 😉

  • @dufresneali
    @dufresneali Жыл бұрын

    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 😉

Келесі