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!
The idea of thinking in terms of axis really helped me grasp how different flex properties affect the items based on the flex-direction value of the container (default or not).
You don't Know How Happy Am I !!! I have been learning Css Flexbox for three Days But Didn't Understand anything but this tutorial Solved my all problems you are better than some of the Udemy Courses
Man, i dont know who you are, but at the age of 35, i only started learning code. Im struggling with flexbox for a while now, and you made it so clear its amazing! Thanks a lot.
i had this video in offline and i got it from a fellow classmate and after watching this video i thought that you deserved a like because this tutorial is just amazing thank you so much for creating this tutorial so i came on YOutube and tracked down this video just so i can press that like button
Thank you so much, i have been struggling with div and flexbox for a couple of days now i kept searching for materials until i found this particular one and it has solved all my concerns. Thanks!
TQVM for this. It is well organised & presented. We are guided through the lesson examples with clear explanations and in an easy to understand manner. I especially like the interactive scrimba version where we get to do instant practice. I highly recommend this video!!
You realy helped me here, havent see others explaing the case about the need of putting flex:1 if we want one item to take more width, without declaring flex to the other items... also the css declararation specification was a good reminder , thank you ❤️
This was really helpful, thank you! It was good to see how the grid moved with the different examples, which I hadn't quite understood when doing the exercises for the CSS Grid and Flexbox challenges. Thanks so much!
Could not get it to do 41:17 with the flex: 1 1 50%; command. Could get it to work that way by using 30% instead of 50%. Only 2 elements would stack on each row that way, not 3 like you would suspect, since 30% fits 3 times inside 100%.
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.
@7:45 Why can't we use justify-self: flex-end on main axis positioning in this example instead of margin-left: auto? I've tried justify-self but it doesn't work, anyone know why in this case?
This is a great course, but I wish you would have linked your code for the second CSS stylesheet "basis". Its hard to match up what you are doing if we don't know what's going on behind the scenes there (I'm a beginner). Otherwise, great course.
I second that. How did you get each div a different color? In addition, when i set my container class height to 100%, it stretches to the bottom of the screen. My content looks nothing like yours.
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.
For Lecture 11, "Bonus - Reponsive Navbar", did you do any styling in basis.css for the ul and li? For example, set "list-style-type" to "none" for li? Can you share? Thanks!
Well it's seems he used "list-style-type:none". But i want to know how did he styled "search" input such that there's no border and only an underline in its place.
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？
0:00 -Your first Flexbox layout
2:04 - Main axis and cross-axis
3:55 - Justify Content
6:22 - Positioning items
10:00 - The flex property
15:01 - Align items
19:09 - Flex direction column
23:09 - Wrapping
25:15 - Flex grow, shrink, basis
34:01 - Order
37:09 - Creating a responsive Navbar
42:42 - Creating a Flexbox image grid
Mustafa Mahmud You’re welcome
Thanks
Thanks
Thank you!
What is use of li in container at 42 min?
The flex-shrink, flex-grow, and flex-basis explanations and examples really helped. 26:00 for those that want to skip to that section.
Exactly. Was looking for this info in this video :)
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!
The idea of thinking in terms of axis really helped me grasp how different flex properties affect the items based on the flex-direction value of the container (default or not).
You don't Know How Happy Am I !!! I have been learning Css Flexbox for three Days But Didn't Understand anything but this tutorial Solved my all problems you are better than some of the Udemy Courses
Wow... Extremely well organized and presented and very clear and precise explanations. Thank you!
All of Per's courses are like this. Very well done and interactive
Man, i dont know who you are, but at the age of 35, i only started learning code. Im struggling with flexbox for a while now, and you made it so clear its amazing! Thanks a lot.
All doubts cleared! I now have a better understanding of flexbox. Honestly, this is the best tutorial for flexbox on RUclips.
i had this video in offline and i got it from a fellow classmate and after watching this video i thought that you deserved a like because this tutorial is just amazing thank you so much for creating this tutorial so i came on YOutube and tracked down this video just so i can press that like button
Your voice is so clear to hear that it becomes so easy to understand.
I've been trying to understand Flexbox from different resources and this one stood out, for sure!! Thank you for the great content!
Thank you so much, i have been struggling with div and flexbox for a couple of days now i kept searching for materials until i found this particular one and it has solved all my concerns. Thanks!
This was the best flexbox explanation I've ever seen
This lecture is a proof of how some other guys out there tend to make things super complicated. Thank you !
Dude, this explanation is just great. Very clear and efficient! Subscribed to the channel after this video. Thank you.
I was reading flex box documentation but this video helps me to understand flex box more quickly
TQVM for this. It is well organised & presented. We are guided through the lesson examples with clear explanations and in an easy to understand manner. I especially like the interactive scrimba version where we get to do instant practice. I highly recommend this video!!
You realy helped me here, havent see others explaing the case about the need of putting flex:1 if we want one item to take more width, without declaring flex to the other items... also the css declararation specification was a good reminder , thank you ❤️
Thank you freecodecamp for doing this course as a video :)
i Think You Know Tamil
@@rishigovindhan749 yeah I know :)
Best teacher for anything HTML or CSS related by far!
before this tutorial i was really confused about flexbox..this cleared all my doubts
This was really helpful, thank you! It was good to see how the grid moved with the different examples, which I hadn't quite understood when doing the exercises for the CSS Grid and Flexbox challenges. Thanks so much!
I ran through grids and flexbox at a stretch and forgot most of it, So here I am
"Hey!" at the begining of seach section. :) I like it
Bite-sized lectures really do the job. Very well presented and explained. Thumbs up!
Hi, Per. I needed a moment and I got this to write. Awesome video for those that-need -to-know. Peace: )
1. (0:01) - Your First Flexbox Layout
2. (1:57) - Main Axis and Cross Axis
3. (3:54) - Justify Content
4. (6:20) - Positioning Items
5. (9:24) - The Flex Property
one of the best explanation ever, thank you
i don't understand English so much but your speaking so easy to learn.Thank you sir
I have landed the right video for "flexbox".
Clear explanation and great examples.
Thank you freecodecamp :)
Wow. Simply wow. So well organised and presented. Loved it. Thank you for the awsome content.
The best video for FLEXBOX
Freecodecamp is teaching freeof cost...u people doing a great job...
FreeCodeCamp is awesome, I am becoming a big fan hahahha
Nice vid! Flexbox is key. One of the most important 3 features of CSS. And without CSS you cant do nothing on the web.
What are the rest two ?
Still the best video on flex box 6 years later
A perfect video to completely understand flex. Thanks for it.
Didn't feel like 48 minutes at all! Thanks a lot for this tutorial!
Thank you again freeCodeCamp. Amazing video!
Per Harald Borgen is an amazing teacher! Thanks!
Heyyy!!! Indeed he is.
Such a clear and well-explained tutorial. Thank you very much for your hard work!
Excellent video, this really helped finally get it.
Could not get it to do 41:17 with the flex: 1 1 50%; command. Could get it to work that way by using 30% instead of 50%. Only 2 elements would stack on each row that way, not 3 like you would suspect, since 30% fits 3 times inside 100%.
Thank you freecodecamp. Thanks to you I learn something new every day.!
There is a significant delay in the flex direction chapter (19:18). Due to this delay, a recognizable portion of the chapter is cut.
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.
greatest flexbox vedio watched till today. hats off to you sir
One of the best video tutorial to get started with flexbox. Thank you so much :)
I've came across this course recently, thanks a lot !!!
Greeting Sir,
Excellent explanation
Sir saw lot of tutorials but you are the best.
no words to thank you
it was amazing i didn't have any clue in Flexbox but after learning this tutorial i'm fine now
Thanks a lot for this 🙏🙏 tutorial. Very organized content & superb explanation 🔥🔥🔥
First video i saw on scrimba, its great, u have great voice
In 18:18 how is he able to use the align property when the the flex-directon is row?
Well explained.
Love the way the content creator present things!
9.99 out of 10....he he he
+0.01, 10/10
Very informative and content is well explained.
Thank you very much. Keep posting such videos.
"Heyyyyyyyy" I love it :D
Audio and video are out of sync in Lecture 7.
Great video though!
I was looking for a comment about this :D
Glad you mentioned 'Lecture 7'. I was about to just close this video thinking the remaining would also be out of sync.
@@conaxliu9677 I was about to close thinking my HomePod is out of sync :-D
@@bqrkhn Maybe it is. 😆
i was today years old when i realised pressing the number keys on your keyboard navigate to the timestamps/chapters looooll
Amazing video, feelin' like a flexbox pro!
I really enjoyed that video, I think you have explained flex box very well!
14:04 I did it in other way:
.home, .logout{
flex:2;
}
It will also work if you put flex:1
at 17:45 to center the button, why not use margin: auto?
best css flexbox tutorial ever!
Thank you for the content you provide. This is helping me turn my life around.
Pretty nice explanation! Made flexbox very clear to me..thanks!
Yeah!!! You did a VERY NICE JOB!!! Congrats and Thank You so Much.👍👍👍👍
On 15:00 why wouldn't you just .home, . logout {} ? Is it bad practice? Its just at that moment you have only flex property for them
At 14:44 is it bad if I did .home, .logout {
flex: 2;
}?
the resolution of yours video is not clear...please for the next course correct it...thanks bcos you done great job...Be bless...
@7:45 Why can't we use justify-self: flex-end on main axis positioning in this example instead of margin-left: auto? I've tried justify-self but it doesn't work, anyone know why in this case?
very intersting ! I would have to go through this video a couple of times to get down all the concepts. Anyways Thanks a lot man ! You made my day :)
Thank you very much for such an educational video ! Nice presentation and easy to understand
Excellent Video Very Very Thanks . I learned whole flex-box
Impressive job, awesome audio, loved the Grid course to, very interactive, its just like a tutorial for dummies, pardon me but in video format.
I have never seen before so many ads in one such short movie
Is it the same with my vid?
Amazing video! Such a clear explanation!
This is a great course, but I wish you would have linked your code for the second CSS stylesheet "basis". Its hard to match up what you are doing if we don't know what's going on behind the scenes there (I'm a beginner). Otherwise, great course.
I second that. How did you get each div a different color? In addition, when i set my container class height to 100%, it stretches to the bottom of the screen. My content looks nothing like yours.
He showed the CSS code at the start of the video. You should be able to copy it in a couple of minutes.
This video just saved my life.
Last night a DJ saved my life
At 7:16, why did you use class instead of id?
the best flex box totourial ever thanks : )
Very easy and I like your style of teaching thank you!!!
this is a very practical video ... I learned many tips from this .. Thank you!
Dude, no joke, i love you! Thanks! :D
Man your code is organised really neat 👍
This was very helpful. Thank you so much.
A great video, helped me to understand Flexbox. Thanks.
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.
.
It's very easy to learn. Thank you so much
Thanks!
Excellent Explanation !!! Thank you ...
you sir, are an absolute hero
I think it would be better to say flex-basis sets the size along the main axis, which in a row is the width and in a column is the height.
11:30 When I add a new div for Profile, it's not getting the background color automatically.
Probably you didn't specified a default background colour in your div element
WOW, thank you so much, I thought that flexbox is a much more complex topic, but thanks to this video , I have learnt it In a day...
thank you very much for that effort, you did a god presentation there
Incredibly helpful, thanks!
For Lecture 11, "Bonus - Reponsive Navbar", did you do any styling in basis.css for the ul and li? For example, set "list-style-type" to "none" for li? Can you share? Thanks!
Well it's seems he used "list-style-type:none".
But i want to know how did he styled "search" input such that there's no border and only an underline in its place.
@@arpitj07_ border: none;
outline : none;
you are slamming, my man. tnx.
Thanks for this fantastic video, learning a lot
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？