You are currently viewing CSS Flexbox Course

CSS Flexbox Course

Once you’ve learned Flexbox, you’ll wonder how you ever managed to build websites without it. This course gets you up to speed as quickly as possible. You can take the interactive version of the course here:

Flexbox gives you all the tools you needed in order to properly arrange content inside flexible containers. Given that all websites need to be flexbile and responsive these days, Flexbox is a must-have skill for web developers.

The course contains the following:

– Your first Flexbox layout
– Main axis and cross axis
– Justify Content
– Positioning items
– The flex property
– Align items
– Flex direction column
– Wrapping
– Flex grow, shrink
– Order
– Creating a responsive Navbar
– Creating a Flexbox image grid

You can connect with the course creator Per Harald Borgen via Twitter:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:


This Post Has 35 Comments

  1. Benjamin Sindal

    I really wish i could see the basic.css syntax for bonus lesson 11. No matter what I do, the input field wont look like the other list items..


    when i first started learning HTML & CSS, i had no problem. FlexBox, though, was so hard to understand for me. Maybe because i was 14, but i really had a hard time understanding it for some reason. This was the last Flexbox video i've watched.

  3. Yao You

    i got a question:if align items is to be applied to all flex items and align-self to a specific flex item, for which element will these CSD properties be applied to?

  4. Justin Ward

    I understood the majority of the flex property before, but I was confused with the whole grow/shrink values. This is by far the best explanation. Thanks!

  5. Enes K

    This lecture is a proof of how some other guys out there tend to make things super complicated. Thank you !

  6. Maggy

    Very easy and I like your style of teaching thank you!!!

  7. Halit Ozgur

    There is a significant delay in the flex direction chapter (19:18). Due to this delay, a recognizable portion of the chapter is cut.

  8. alix8787

    I copied all the code, but in Chapter 11 – Creating a responsive navigation bar-, what should I change in the basic.css file, because the result is different from yours. Thanks !

  9. Michal P.

    Hi, what editor do you use that the changes in code are directly shown in browser? thx

  10. Francis Lambert

    Hi, Per. I needed a moment and I got this to write. Awesome video for those that-need -to-know. Peace: )

  11. SphInXx

    i was today years old when i realised pressing the number keys on your keyboard navigate to the timestamps/chapters looooll

  12. World Class Code

    Nice vid! Flexbox is key. One of the most important 3 features of CSS. And without CSS you cant do nothing on the web.

  13. Ali Haider

    Hi, could you guide me about the basic.css file modifications before explaining Index.css at 38:59. I am unable to apply CSS to Search, rest i have managed.

Leave a Reply