Hey ninjas, in this CSS Flexbox tutorial, I’ll show you how we can wrap flex items using the flex-wrap property. Flex-wrap allows us to wrap elements onto the next line when there is not enough room for them in the current row of content.

+ Source files on GitHub –
+ Brackets editor –

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…


========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – or

================== Social Links ==================

Twitter – @TheNetNinja –


  1. Good videos but your intro is WAY TOO LOUD.
    Every video I see, I have to turn down the volume, but then I have to turn it back up to hear you after intro is over.

  2. is there a way i can apply additional rules for a div if it wraps? like before it wraps a div is blue and as soon as it wraps it gets red

  3. That is pretty exciting indeed! Thanks so much for the tutorial – really clearly explained, it seems so easy now! Keep up the good work 🙂

  4. do you suggest users forget about bootstrap for flexbox? it seems the flexbox can do similar layouts without importing css styles from bootstrap.min.css .. …

  5. Hi You are a very good teacher. so easy explanation .
    Another thing is even i've done the width 200px and flex grow. when i shrink the page the bar don't show at the bottom and the green don't go off the page. Can you plz let me know why. Thanks for these great video.

  6. I highly appreciate what you're doing . Great explanation great examples and I feel like learning was never easier ! Keep up the good work!


Please enter your comment!
Please enter your name here