Hey, in this CSS flexbox tutorial, we’ll be taking a look at the flex-basis property, which sets the ‘starting width’ of your flex elements.

+ 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. Thank you very much for your amazing tuts. I used the flex shorthand but I found that the flex-basis doesn't work well in it. it works as if I gave it a min-width and in small screens i have to scroll horizontally. But if I use flex-basis property itself it works well. Can you please tell me how to solve this problem?

  2. Great tutorial, thanks! I have a question, perhaps i find help here. I worked out the tuts with the navbar, the cards and the stack vs grid. Good to understand and to learn And the result is: when i change from grid to stack, also the cards change to stack. How i can avoid that and leave the cards as they are, not changeable to stack? Is this possible?

  3. Hey, I really like these videos, thanks for posting! I noticed that your chrome browser generates the file immediately without a refresh on the screen. How did you accomplish this? Thanks (ahead of time). -Matt

  4. Dude you are the best! I am learning HMTL/CSS (about a month and change in) and you are explaining this stuff so easily. And I feel like I will avoid having to even bother with some cumbersome ways of creating sites that are styled responsively!!!!


Please enter your comment!
Please enter your name here