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).
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
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
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!
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 ❤️
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!!
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!
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.
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%.
Man, sorry I even do not know your name, Big Big thanks to you, and a lots of prosperity for your unbelievably cool lessons! You said there is lessons about CSS Grid, where I can find the link? Thanks in advance!
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.
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!
@@georgekingiv8171 yes this is one of the style. {Border: transparent Border-top-style: hidden Border-left-style: hidden Border-right-style: hidden Border-bottom-style: grooved } Using pseudo element :: Placeholder { Color: #ffff }
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.
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).
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.
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!
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
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
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
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!
All doubts cleared! I now have a better understanding of flexbox. Honestly, this is the best tutorial for flexbox on UA-cam.
This lecture is a proof of how some other guys out there tend to make things super complicated. Thank you !
The best video for FLEXBOX
Dude, this explanation is just great. Very clear and efficient! Subscribed to the channel after this video. 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 ❤️
I was reading flex box documentation but this video helps me to understand flex box more quickly
Best teacher for anything HTML or CSS related by far!
Thank you freecodecamp for doing this course as a video :)
i Think You Know Tamil
@@rishigovindhan749 yeah I know :)
"Hey!" at the begining of seach section. :) I like it
before this tutorial i was really confused about flexbox..this cleared all my doubts
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!!
Hi, Per. I needed a moment and I got this to write. Awesome video for those that-need -to-know. Peace: )
Thanks!
i don't understand English so much but your speaking so easy to learn.Thank you sir
Freecodecamp is teaching freeof cost...u people doing a great job...
one of the best explanation ever, thank you
Thank you again freeCodeCamp. Amazing video!
Still the best video on flex box 6 years later
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!
I ran through grids and flexbox at a stretch and forgot most of it, So here I am
Bite-sized lectures really do the job. Very well presented and explained. Thumbs up!
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 ?
Excellent video, this really helped finally get it.
FreeCodeCamp is awesome, I am becoming a big fan hahahha
I've came across this course recently, thanks a lot !!!
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. 😆
Per Harald Borgen is an amazing teacher! Thanks!
Heyyy!!! Indeed he is.
Didn't feel like 48 minutes at all! Thanks a lot for this tutorial!
greatest flexbox vedio watched till today. hats off to you sir
First video i saw on scrimba, its great, u have great voice
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.
A perfect video to completely understand flex. Thanks for it.
"Heyyyyyyyy" I love it :D
best css flexbox tutorial ever!
Greeting Sir,
Excellent explanation
Sir saw lot of tutorials but you are the best.
no words to thank you
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
I have never seen before so many ads in one such short movie
Is it the same with my vid?
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.
the resolution of yours video is not clear...please for the next course correct it...thanks bcos you done great job...Be bless...
i was today years old when i realised pressing the number keys on your keyboard navigate to the timestamps/chapters looooll
Well explained.
Love the way the content creator present things!
9.99 out of 10....he he he
+0.01, 10/10
Such a clear and well-explained tutorial. Thank you very much for your hard work!
it was amazing i didn't have any clue in Flexbox but after learning this tutorial i'm fine now
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.
Thanks a lot for this 🙏🙏 tutorial. Very organized content & superb explanation 🔥🔥🔥
14:04 I did it in other way:
.home, .logout{
flex:2;
}
It will also work if you put flex:1
One of the best video tutorial to get started with flexbox. Thank you so much :)
The flex property 13:05
Amazing video, feelin' like a flexbox pro!
Very informative and content is well explained.
Thank you very much. Keep posting such videos.
you are slamming, my man. tnx.
I really enjoyed that video, I think you have explained flex box very well!
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%.
Man, sorry I even do not know your name, Big Big thanks to you, and a lots of prosperity for your unbelievably cool lessons!
You said there is lessons about CSS Grid, where I can find the link? Thanks in advance!
In 18:18 how is he able to use the align property when the the flex-directon is row?
freeCodeCamp forever
This video just saved my life.
Last night a DJ saved my life
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;
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.
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!
Impressive job, awesome audio, loved the Grid course to, very interactive, its just like a tutorial for dummies, pardon me but in video format.
the best flex box totourial ever thanks : )
Yeah!!! You did a VERY NICE JOB!!! Congrats and Thank You so Much.👍👍👍👍
Excellent Video Very Very Thanks . I learned whole flex-box
at 17:45 to center the button, why not use margin: auto?
you sir, are an absolute hero
Man your code is organised really neat 👍
Amazing video! Such a clear explanation!
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 :)
19:12 where I left, I'll continue
I finished it, thanks)
Very easy and I like your style of teaching thank you!!!
Thank you very much for such an educational video ! Nice presentation and easy to understand
This was very helpful. Thank you so much.
Finished!
Thank youuuu!
Excellent Explanation !!! Thank you ...
"Heyyyyyyyiii...." Thanks for the course :)
Dude, no joke, i love you! Thanks! :D
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
please can you tell me what text-editor or HTML Editors / Testers you use?
It looks like Brackets.
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
how do you give the input search that style?
Thank you .. very nice.. this is gold
Amazing stuff. i want to know how did you styled "search" input such that there's no border and only an underline in its place.
I think by making {border: transparent;} 🤔
@@georgekingiv8171 yes this is one of the style.
{Border: transparent
Border-top-style: hidden
Border-left-style: hidden
Border-right-style: hidden
Border-bottom-style: grooved }
Using pseudo element
:: Placeholder {
Color: #ffff }
this is a very practical video ... I learned many tips from this .. Thank you!
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.