SHARE

Yo ninjas, in this CSS Flexbox tutorial I’ll show you how we can create a navigation / menu bar using flexbox – reeeeaaaally easily! Instead of floating all of the items to the left or right, then fixing the parent element collapse etc, all we need to do is apply 1 flex property and boom – we have ourselves a nice menu :).

—– COURSE LINKS:
+ Source files on GitHub – https://github.com/iamshaunjp/css-flexbox-playlist
+ Brackets editor – https://brackets.io/

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

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

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

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

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

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

37 COMMENTS

  1. Great tutorial. Just a little note: floating ul elements to the right doesn't change the order of li(s), floating li elements is what causes them to reverse order.

  2. You should have used percentages for the wrapper ''max-width', some people are using smaller or bigger screens to follow your tutorials, just a tip

  3. Hey man, just found your channel and I have to say a BIG thanks for the videos! Really helping me on my journey to becoming a Web Developer. Quick question, would Flexboxes be the go to method for layouts for you today?

  4. Man, you are just awesome. I have one question. You used this in media query. Can we used this in desktop display and in media query can we use display: block for responsive?

  5. Man, you are just awesome. I have one question. You used this in media query. Can we used this in desktop display and in media query can we use display: block for responsive?

  6. time 4:25, for beginners like me, ( Flex: 1 1 0 ) mean (flex: flex-grow flex-shrink flex-basis) 🙂
    The Net Ninja, what type of theme You are using in brackets?
    EDIT: Smarth Theme Dark

  7. I have been studying web dev on youtube for some time now, and have watched many of the guys doing what you do.. you are most definitely one of the best. I appreciate what you do!

  8. Pretty much a case study in how to make a tutorial.
    No filler, no fluff, no BS, just 100% solid meaty goodness.
    Thank You for sharing your knowledge. Super useful.

  9. I have completely followed your code. But for some reason the nav is just stacking on top of each other, and looks the same full screen as it does shrunk. Why? I've gone through it a few times, and still no joy.

  10. Hello,I'm new in web design and it appears that I fall in love for web designing.I have subscribed on you account.I will keep following you.

  11. This is awesome. I'm a newbie to web dev and although I have heard about Flexbox, I haven't looked through it till now. This flex feature is amazing, so powerful and convenient. Thanks for your amazing vids 😉 Keep it up

  12. Very cool!
    You are doing a mobile-first approach here, aren't you? With specifying media queries for the bigger screen rather than the other way around?

  13. Why do you use justify-content: flex-start; for the nav ul when you already say flex: 1 1 0; for the nav li? What does the flex-start achieve in this case? When I comment it out, the style remains the same. Thank you.

  14. Ninja you are the coolest explainer in youtube. I have a loooooot of channels to learn css and other programming stuff, but your videos are the most helpful. Thanks!

LEAVE A REPLY

Please enter your comment!
Please enter your name here