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).
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!
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.
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!
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
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 ❤️
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.
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!
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!!
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.
this CSS Flexbox course, you will learn how to use Flexbox, a powerful layout model in CSS, to create flexible and responsive web designs. Flexbox is an essential skill for front-end web developers, as it simplifies the process of building complex layouts and aligning items within a container. Course Outline: Introduction to Flexbox: Understanding the concept of Flexbox and its advantages Exploring the Flex container and Flex items Learning the main axis and cross axis in Flexbox Flexbox Container Properties: display: flex; and display: inline-flex; flex-direction: row, row-reverse, column, column-reverse flex-wrap: nowrap, wrap, wrap-reverse justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly align-items: flex-start, flex-end, center, baseline, stretch align-content: flex-start, flex-end, center, space-between, space-around, stretch Flexbox Item Properties: flex-grow, flex-shrink, and flex-basis flex: shorthand for flex-grow, flex-shrink, and flex-basis order: changing the order of Flex items align-self: overriding alignment for individual Flex items Flexbox and Responsive Design: Creating responsive layouts with Flexbox Using media queries to adapt Flexbox behavior on different screen sizes Building responsive navigation bars and content grids Flexbox Techniques and Design Patterns: Equal-height columns with Flexbox Vertical centering of content Sticky footers and off-canvas menus Card layouts and media objects Combining Flexbox with CSS Grid: Integrating Flexbox and CSS Grid to build powerful layouts Leveraging the strengths of both layout models Cross-Browser Compatibility and Vendor Prefixes: Understanding browser support for Flexbox Using vendor prefixes for older browser versions Best Practices and Performance Considerations: Writing clean and maintainable Flexbox code Performance tips for optimizing Flexbox layouts Throughout the course, you will work on hands-on exercises and real-world projects to solidify your understanding of Flexbox and how to use it effectively in your web development workflow. By the end of this CSS Flexbox course, you will have mastered Flexbox and gained the skills to create dynamic, flexible, and visually appealing layouts for your web projects.
Even when I don't include "height: 100%;" in the basic.css file under the html, body tags the page is still responsive for me. As long as I have "height: 100%;" in my container selector within the index.html file. I am confused why it's working for me when he keeps saying in the video that it won't work. By the way, amazing video. Thank you 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%.
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.
![Megan Thee Stallion - Neva Play (feat. RM) [Official Video]](http://i.ytimg.com/vi/TpYTyAaTRts/mqdefault.jpg)
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
Norlyn Piquero
Thanks
Mustafa Mahmud You’re welcome
Thanks
Thanks
Thank you!
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).
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 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 :)
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
I've been trying to understand Flexbox from different resources and this one stood out, for sure!! Thank you for the great content!
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
Your voice is so clear to hear that it becomes so easy to understand.
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.
This was the best flexbox explanation I've ever seen
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!
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
All doubts cleared! I now have a better understanding of flexbox. Honestly, this is the best tutorial for flexbox on TH-cam.
I was reading flex box documentation but this video helps me to understand flex box more quickly
Dude, this explanation is just great. Very clear and efficient! Subscribed to the channel after this video. Thank you.
before this tutorial i was really confused about flexbox..this cleared all my doubts
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 ?
This lecture is a proof of how some other guys out there tend to make things super complicated. Thank you !
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 ❤️
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.
"Hey!" at the begining of seach section. :) I like it
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
one of the best explanation ever, thank you
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!!
Still the best video on flex box 6 years later
Thank you freecodecamp for doing this course as a video :)
i Think You Know Tamil
@@rishigovindhan4619 yeah I know :)
I've came across this course recently, thanks a lot !!!
Best teacher for anything HTML or CSS related by far!
Bite-sized lectures really do the job. Very well presented and explained. Thumbs up!
i don't understand English so much but your speaking so easy to learn.Thank you sir
Wow. Simply wow. So well organised and presented. Loved it. Thank you for the awsome content.
Excellent video, this really helped finally get it.
Per Harald Borgen is an amazing teacher! Thanks!
Heyyy!!! Indeed he is.
I have landed the right video for "flexbox".
Clear explanation and great examples.
Thank you freecodecamp :)
Thanks a lot for this 🙏🙏 tutorial. Very organized content & superb explanation 🔥🔥🔥
A perfect video to completely understand flex. Thanks for it.
FreeCodeCamp is awesome, I am becoming a big fan hahahha
The best video for FLEXBOX
Thank you again freeCodeCamp. Amazing video!
Such a clear and well-explained tutorial. Thank you very much for your hard work!
Didn't feel like 48 minutes at all! Thanks a lot for this tutorial!
First video i saw on scrimba, its great, u have great voice
it was amazing i didn't have any clue in Flexbox but after learning this tutorial i'm fine now
This was very helpful. Thank you so much.
Freecodecamp is teaching freeof cost...u people doing a great job...
Very informative and content is well explained.
Thank you very much. Keep posting such videos.
Thank you freecodecamp. Thanks to you I learn something new every day.!
"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. 😆
Greeting Sir,
Excellent explanation
Sir saw lot of tutorials but you are the best.
no words to thank you
Hi, Per. I needed a moment and I got this to write. Awesome video for those that-need -to-know. Peace: )
best css flexbox tutorial ever!
Excellent Explanation !!! Thank you ...
greatest flexbox vedio watched till today. hats off to you sir
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.
Amazing video, feelin' like a flexbox pro!
One of the best video tutorial to get started with flexbox. Thank you so much :)
Amazing!! Thank you so much =)
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.
Well explained.
Love the way the content creator present things!
9.99 out of 10....he he he
+0.01, 10/10
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
Pretty nice explanation! Made flexbox very clear to me..thanks!
Finished!
Thank youuuu!
Yeah!!! You did a VERY NICE JOB!!! Congrats and Thank You so Much.👍👍👍👍
14:04 I did it in other way:
.home, .logout{
flex:2;
}
It will also work if you put flex:1
I really enjoyed that video, I think you have explained flex box very well!
The flex property 13:05
Thank you for the content you provide. This is helping me turn my life around.
Thank you .. very nice.. this is gold
this CSS Flexbox course, you will learn how to use Flexbox, a powerful layout model in CSS, to create flexible and responsive web designs. Flexbox is an essential skill for front-end web developers, as it simplifies the process of building complex layouts and aligning items within a container.
Course Outline:
Introduction to Flexbox:
Understanding the concept of Flexbox and its advantages
Exploring the Flex container and Flex items
Learning the main axis and cross axis in Flexbox
Flexbox Container Properties:
display: flex; and display: inline-flex;
flex-direction: row, row-reverse, column, column-reverse
flex-wrap: nowrap, wrap, wrap-reverse
justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
align-items: flex-start, flex-end, center, baseline, stretch
align-content: flex-start, flex-end, center, space-between, space-around, stretch
Flexbox Item Properties:
flex-grow, flex-shrink, and flex-basis
flex: shorthand for flex-grow, flex-shrink, and flex-basis
order: changing the order of Flex items
align-self: overriding alignment for individual Flex items
Flexbox and Responsive Design:
Creating responsive layouts with Flexbox
Using media queries to adapt Flexbox behavior on different screen sizes
Building responsive navigation bars and content grids
Flexbox Techniques and Design Patterns:
Equal-height columns with Flexbox
Vertical centering of content
Sticky footers and off-canvas menus
Card layouts and media objects
Combining Flexbox with CSS Grid:
Integrating Flexbox and CSS Grid to build powerful layouts
Leveraging the strengths of both layout models
Cross-Browser Compatibility and Vendor Prefixes:
Understanding browser support for Flexbox
Using vendor prefixes for older browser versions
Best Practices and Performance Considerations:
Writing clean and maintainable Flexbox code
Performance tips for optimizing Flexbox layouts
Throughout the course, you will work on hands-on exercises and real-world projects to solidify your understanding of Flexbox and how to use it effectively in your web development workflow.
By the end of this CSS Flexbox course, you will have mastered Flexbox and gained the skills to create dynamic, flexible, and visually appealing layouts for your web projects.
Thank you very much for such an educational video ! Nice presentation and easy to understand
Even when I don't include "height: 100%;" in the basic.css file under the html, body tags the page is still responsive for me. As long as I have "height: 100%;" in my container selector within the index.html file. I am confused why it's working for me when he keeps saying in the video that it won't work.
By the way, amazing video. Thank you so much!
Same
Very easy and I like your style of teaching thank you!!!
Excellent Video Very Very Thanks . I learned whole flex-box
the resolution of yours video is not clear...please for the next course correct it...thanks bcos you done great job...Be bless...
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%.
Impressive job, awesome audio, loved the Grid course to, very interactive, its just like a tutorial for dummies, pardon me but in video format.
It's very easy to learn. Thank you so much
i was today years old when i realised pressing the number keys on your keyboard navigate to the timestamps/chapters looooll
"Heyyyyyyyiii...." Thanks for the course :)
There is a significant delay in the flex direction chapter (19:18). Due to this delay, a recognizable portion of the chapter is cut.
Amazing video! Such a clear explanation!
you are slamming, my man. tnx.
the best flex box totourial ever thanks : )
This was very good, huge Like
well explained thank you so much
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;
This video just saved my life.
Last night a DJ saved my life
very, very, very, veeeeeeeeeeeeeerrryyyyyyyyyy gooood. thank you very very very much
Great tutorial!
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 :)
freeCodeCamp forever
19:12 where I left, I'll continue
I finished it, thanks)
Incredibly helpful, thanks!
you sir, are an absolute hero
this is a very practical video ... I learned many tips from this .. Thank you!
A great video, helped me to understand Flexbox. Thanks.
Thanks to this video, I understood better CSS Flexbox. I'm so glad about the content that FreeCodeCamp provide us.
Thank a lot, this video very Helpful
Thank you so much.. i really enjoyed your teaching.👏👏👏