Flexbox Tutorial (CSS): Real Layout Examples

Learn how to use Flexbox to create different layouts. Link to my new “Git a Developer Job” course:

Link to code used in this video:

Link to more about browser support:

Add me on Twitter for webDev updates and cat pics:






45 responses to “Flexbox Tutorial (CSS): Real Layout Examples”

  1. ruchi rai Avatar

    Clearly explained the concept of flex.Very nice video.

  2. Tamás Kemény Avatar

    Great tutorial!!! 🙂
    what is the name of the html editor?

  3. jayvl09 Avatar

    Your first comment on the width is not correct. You can set width to fill-available, or maybe fit-content depending on the intrinsic max-content of an input element box.

  4. Lennerd Jacott Avatar

    I enjoyed your teaching skills ..

  5. MsWhitt18 Avatar

    Very clear, good job!

  6. Thomas Connolly Avatar

    Absolutely the best tutorial on this subject. Thank you!

  7. UnleashedGraffixx Avatar

    9 minutes in and I'm in love with Flexbox already. 19 years of coding! Where has this been all my life?

  8. Tomasz Konecki Avatar

    It couldn't be explained clearer. Thanks a lot! 🙂

  9. Schrein3r Avatar

    How did you get your mouse icon displaying those pixels?

  10. samlali youssef Avatar

    thes is the best tutorial ever
    ive seen all of your videos
    you are the best

  11. MOURI'S KITCHEN Avatar

    thank you Sir … Learned a lot

  12. Encore 4K Avatar

    I can't believe this, I have been without flex for so many years 🙁

  13. Elregar71 Avatar

    I'm confused on when/if to use box-sizing: border-box. Do I use it for all elements with *? And then flex everything else?

  14. Hüseyin Erkmen Avatar

    This is the best tutorial that i have watched last months. Thanks man.

  15. suraj bora Avatar

    I love "margin auto";

  16. boostry123 Avatar

    damn this was such a helpful video thanks!!

  17. Mo Ca Avatar

    I have been watching videos about html,css and php for the past two months. This is probably the best I have seen so far overall. Explained crisp and extremely understandable. If you are already a bit advanced you won't get bored and if you have no clue all your possible question will be answered.
    Just top stuff right there. Thank you mister for sharing your knowledge it was a pleasure.
    peeaaaazzzzeee from Switzerland.

  18. Rafael Ceballo Avatar

    i subbed in the first 20 seconds lol

  19. devdesign Avatar

    i got something

  20. Kevin Bebel Avatar

    Thank you for the awesome tutorial. I really needed it.

  21. vinay sharma Avatar

    Thanks for thus tut 🙂

  22. Sai Chakradhar Gandla Avatar

    Please show me the HTML code for Example #4

  23. Nyng Wang Avatar

    "Hmm, I'm not budging" — flex box.

  24. Brandon Bahret Avatar

    As a noob I find positioning elements to be particularly tricky, this should help, thanks.

  25. 2003BlueRay Avatar

    Thank you very much, centering things was a nightmare

  26. Ricardo Magalhães Avatar

    Just wanted to say: thank you for taking the time to write such a comprehensive guide to Flexbox for free. Very good work 🙂

  27. Paul Jacobson Avatar

    This video is terrific, thank you. I'm only just starting to learn Flexbox and your video is a fantastic introduction to the basic structure of the syntax.

  28. SuperUnitato Avatar

    I put everything in my container like in example 4 and every single div is given a new line? even my <h1> is split into two line? help? https://gist.github.com/SuperUnitato/1665c3367215eb3c6ccf77488de2c71b

  29. Michael Opoku Avatar

    Great videos! What are the names of the songs you use as instrumentals in your video?

  30. praveen kumar Avatar

    does flex-basis applies on img tag?

  31. Nikola Zaykov Avatar

    Wow mate, excellent explanation about flex box, I made it step by step and you opened my eyes. I believe I will need to rewatch it few times, but it was great! Keep it up same way

  32. W Gallo Avatar

    Your cats are beautiful. I wish i could show you mine…

  33. Shivam Kaushik Avatar

    Flexbox is awesomee..

  34. Sarunas Matulaitis Avatar

    Nice background music 😉

  35. Elregar71 Avatar

    Wow great tutorial, subbed.

  36. Halus Kua Avatar

    best flexbox tutorial on the web no doubt

  37. ms Avatar

    Great work! Subbed! Thank you!

  38. Michael Klim Avatar

    Very awesome explanation, man! Thanks a lot! If I'd have money I'd bought your course :p

  39. arun kumar Avatar

    Great teaching….Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *