Thanks for cool Flexbox Tutorial 4:05 Flex Direction 5:24 Flex Wrap 6:45 Setting nowrap will ignore width of item 7:50 Flex-flow = flex-direction+flex-wrap 9:33 Flex justify-content 11:09 align-items defaults is "strech" 11:43 align-items works as cross axis (if you are column then it row) 13:06 align-items Baseline align text same level 15:58 align-contents align all content in flex
I've been skipping learning flexbox as a front-end developer I developed a website and after using various media queries for various screen sizes I discovered that my website is still not responsive. I saw your 21 days responsive design lesson and ever since responsiveness as been a simple task for me to perform using my CSS. Thanks for this KP.
2.2k likes. 10 dislikes. That's a great ratio and a testament to your quality of content. Keep up the good work Kevin, you do a great job in these videos.
Mann, this is very helpful. I really love the way you explain, how you express yourself. It's so clean and simple, it's like the KISS rule. "Keep it simple"
THIS VIDEO MAN! I can't believe it... you've helped me to break down that flex positioning wall that was blocking my progress. I really can't thank you enough. I actually understand the relationships between justify and align... they're axis (dependant on column or row) and how they position the items. MASSIVE result for me. THANKS
Before i start the video i thought i'll never ever clear the concept of flex its so confusing.... but after watching ur video my all doubts are clear. Thank you sir for making the videos like these.... Lots of love and thanks from India.
Kevin, yours tutorials are amazing. I started in the Workflow and will watch everything after. I'll watch this after done the others tutorials. Thank you!
This is the best tutorial on flexbox I have seen on the net, and you top that with those wonderful links for flex playground, Thanks a million you are the man for any CSS needs.
Thanks for making this so simple. I've seen some other videos on the same topic but not many can simplify it the way your videos do. Thanks for the help and keep up the good work!
That's a bit confusing when the flex-direction is set to row and items take up a column space 🙄 but anyway, it is what it is 😁 Kevin you're an amazing teacher, I love your videos, they're superuseful. Keep up the fanstastic work!!!
i was looking for responsive navbar for mobile phone and i find out your channel i just wanna to say thank you and by the way you have amazing videos here keep it up u will have more subscribers to ur channel if you keep the great tutorials sorry for my bad english Thank you
I think some people avoid it because it can come across as complicated. It definately had a lot of properties, but it doesn't have to be hard. I did just realize I should do 4 videos in this series though, because there are some really neat tips and tricks that I should talk about too.
Thank you Sir ! @12:00, very important notice since, if I got it right, the property 'flex-direction : row/column' SWITCHES the x and y axis ! Keep on the good job, please !
Love the way you explain things in short and simple way. It's really helpful. I was looking at your videos to find one about Fixed, Fluid, Adaptive and Responsive layout design concept but couldn't found it. I would really appreciate if you can make one to describe the difference and which one you think is the best. Many thanks.
Thanks cuz I just made a big move in getting comfortable with CSS!! U da 🐐Goat! But 1 question about the Position absolute Vs relative explained video tho, I'm kinda losing my mind at how I didn't set the margin of the red box & yet I checked the browser, it showed margin of 100... Whereas in the video u made, u didn't seem to set any margins for your child (red box) Is this a default value the browsers have set for you??
Thanks so much! As for the margins, by default a div has 0 margin, maybe there was something in your CSS adding it? It might not have been on that specific box, but on all divs or something?
01:35 Why all these classes? Couldn't we just select the direct children of the container? Less code in HTML and more DRY (less repetitive). 03:00 What happens to the margins of the items? Do they still collapse or not? Does it depend on the main direction?
So the main axis goes across but the cross axis goes down.... hmmm not at all intuitive. lol. I love your approach very scientific "use one if its wrong use the other". Man I did that with three wives that didn't work out so well for me. Grab another beer and try again.😄
@@KevinPowell Sorry, I just realised most of them are fixed, I guess. Here is a good source of flexbugs for IE and Safari, of which most (or even all) are fixed for Safari: github.com/philipwalton/flexbugs
I’m using visual studio and I can’t see the modifications until I go to Google to check my index, what are you using to code and watch instantly the modifications???
Flexbox is amazing. It can be a bit overwhelming at first because there are a lot of properties, but just how easy it is to have a parent div with three child divs inside... give the parent a display: flex; and you have columns... and you don't need clears! Amazing.
Hello,how can you split the editor like this, I am new to vs code but its seems way more easier to just have the css right below the html and the browser to the right. Please advise,thanks!
Making a different CSS file is most flexible in case there are more than one page on a website because with an external style sheet, you can change the look of an entire website by changing just one file. You don't have to manually change each style tag in each HTML file.
I would! It is a bit more complicated, but it is more intuitive as well in my opinion, and gives you a lot more control. Floats are clears aren't going to be relevant for much longer, except for a few minor things (not so much layout stuff anyway).
I want to have one div being the main content on the left - another two small div at the right - then about three more s div at the bottom. Tried with flexbox but wasnt bale to get this. Obviously each div box will have different size but can't seem to get the about layout
I didn't number these ones because they sort of stand on their own as well, while I made them in a specific order, I'm not sure the order is super important... well except the 3rd one I guess?
Flexbox has been around longer and has better browser support. You could build a layout with it today unless you need IE9 support. The Grid is VERY new, and while all the big browsers support it, it's only the newest versions that do, so support isn't as great yet. Flexbox is 1-dimensional, meaning that it can create either a row or a column. The grid is 2-dimensional. We can create rows and columns at the same time. It also allows us to make rows and columns, and then place content where we need to on the grid. With flexbox, you're creating either a row or column, and then fill it up with the divs you need.
Start with something simple! Find some layouts on line, or sketch something out, and see if you can put it together! I do have a few series on building pages from scratch that might help as well.
How can anyone with his/her full brain capacity even dislike this video? The content, the flow, and Kevin are amazing!
maybe by mistake 🤔
because we love Kevin!
I totally agree with, Kevin is incredible and it's impressive someone can give him a dislike.
Trolls will be trolls I guess.
It's not that they don't like the video. It's just that they are unhappy and are currently watching the video.
Thanks for cool Flexbox Tutorial
4:05 Flex Direction
5:24 Flex Wrap
6:45 Setting nowrap will ignore width of item
7:50 Flex-flow = flex-direction+flex-wrap
9:33 Flex justify-content
11:09 align-items defaults is "strech"
11:43 align-items works as cross axis (if you are column then it row)
13:06 align-items Baseline align text same level
15:58 align-contents align all content in flex
Thank you!!!
Thank you. It's sad I'm just getting to know you. But I'm happy and very grateful that I came across you🥰🥰
thanks
Just wanted to say how much I'm enjoying your videos, Kevin. You're a great teacher!! :)
I've been skipping learning flexbox as a front-end developer I developed a website and after using various media queries for various screen sizes I discovered that my website is still not responsive. I saw your 21 days responsive design lesson and ever since responsiveness as been a simple task for me to perform using my CSS.
Thanks for this KP.
2.2k likes. 10 dislikes. That's a great ratio and a testament to your quality of content. Keep up the good work Kevin, you do a great job in these videos.
0 complaints, what a flawless video. Thank you for all you do, Kevin
Mann, this is very helpful. I really love the way you explain, how you express yourself. It's so clean and simple, it's like the KISS rule. "Keep it simple"
explicitly explained this channel has so much value in it
THIS VIDEO MAN! I can't believe it... you've helped me to break down that flex positioning wall that was blocking my progress. I really can't thank you enough. I actually understand the relationships between justify and align... they're axis (dependant on column or row) and how they position the items. MASSIVE result for me. THANKS
Dear Kevin, all your videos are so brilliant and help me a lot. Thankful Barbara from Germany 😊
Wow, flex wrap is all I needed. But the video was all my coding career needed. Thanks a ton, Kevin!!!
Your content is amazing. I'm doing the 21days of challenge of Conquering Reponsive Layouts and I'm loving it. Thanks !
Before i start the video i thought i'll never ever clear the concept of flex its so confusing.... but after watching ur video my all doubts are clear. Thank you sir for making the videos like these.... Lots of love and thanks from India.
Thanks man! You are changing the world by allowing people the opportunity to learn more about something practical like web development. Great work!
Thanks so much for your kind words! It's something that I really have a passion for, and hopefully I can help a few people with it along the way 😁
28,000 views, but not even 1000 likes. this definitely worth a watch. appreciate guys. he's doing great job
Kevin, yours tutorials are amazing. I started in the Workflow and will watch everything after. I'll watch this after done the others tutorials. Thank you!
Thanks so much André!! I'm glad you're enjoying my videos!
Man, you are awesome!! Before I watch the video I knew "How Flexbox works", but after the video I know really how works!! Thank you!
Thanks so much Simeon, glad that it's helped!
Kevin Sir your the best teacher for CSS
Kevin, I cannot thank you enough for what you do and how you do it. You are a wonderful teacher and the reason that I have fallen in love wtih CSS 😍
Keep up the videos man. I know you're small now but I like the way you explain stuff to a non-English native speaker like myself.
Awesome, glad that I'm clear even if English isn't your native language! Thanks for the vote of confidence 😁.
This is the best tutorial on flexbox I have seen on the net, and you top that with those wonderful links for flex playground, Thanks a million you are the man for any CSS needs.
Kevin Powel is god of CSS!
Hi there, you re solved me for now a small problem i had, to understand some things. Thanks, keep up the good work🎸
Thanks for making this so simple. I've seen some other videos on the same topic but not many can simplify it the way your videos do. Thanks for the help and keep up the good work!
Great instruction! Currently in an online coding bootcamp. Your classes have been a huge help. Thanks!
still watching in 2021! Thank you so much Kevin
That's a bit confusing when the flex-direction is set to row and items take up a column space 🙄 but anyway, it is what it is 😁 Kevin you're an amazing teacher, I love your videos, they're superuseful. Keep up the fanstastic work!!!
i was looking for responsive navbar for mobile phone and i find out your channel
i just wanna to say thank you and by the way you have amazing videos here keep it up
u will have more subscribers to ur channel if you keep the great tutorials
sorry for my bad english
Thank you
Thanks so much!!
Thank you for providing this high quality tutorials, I started to learn web dev this month and your tutorial thought me a lot😊.
You are an amazing tutor.👏👏👏
Thanks!
Thank you!
You are probably my favorite person
Nice and simple way put together and your tip of using playground is the life saver 👍
@Kevin, You are the CSS to my HTML
Im just gona leave my Thank you comment before even watching the video, there is no way I wont leave this video with flexbox knowledge. Thank you
thank yooouu!! Was able to fix a design problem in my webpage!!
finally a simple video for flexbox 👐👐
I think some people avoid it because it can come across as complicated. It definately had a lot of properties, but it doesn't have to be hard. I did just realize I should do 4 videos in this series though, because there are some really neat tips and tricks that I should talk about too.
Thank you Sir ! @12:00, very important notice since, if I got it right, the property 'flex-direction : row/column' SWITCHES the x and y axis ! Keep on the good job, please !
Love the way you explain things in short and simple way. It's really helpful. I was looking at your videos to find one about Fixed, Fluid, Adaptive and Responsive layout design concept but couldn't found it. I would really appreciate if you can make one to describe the difference and which one you think is the best. Many thanks.
You’ve been the most helpful person I’ve found. Thanks!
Glad you've found my content helpful!
Thanks cuz I just made a big move in getting comfortable with CSS!! U da 🐐Goat!
But 1 question about the Position absolute Vs relative explained video tho, I'm kinda losing my mind at how I didn't set the margin of the red box & yet I checked the browser, it showed margin of 100... Whereas in the video u made, u didn't seem to set any margins for your child (red box)
Is this a default value the browsers have set for you??
Thanks so much!
As for the margins, by default a div has 0 margin, maybe there was something in your CSS adding it? It might not have been on that specific box, but on all divs or something?
thanks Kevin very much , this was so helpful
You are a lifesaver!
Another amazing tutorial! You made it so easy to watch and understand. Thank you!
Kevin, you are awesome, I've learnt so much from your tutorials. Keep the good work!!!
Thanks so much dangange! Glad to hear my videos are helping you out :)
Thank you for being so helpful! Amazing content!
"just try one and if it's the wrong one use the other one". And I thought I was just a noob 😂
Brute Force solutions are always the answer 😂
Excellent tutorial
Excellent video, thanks 🙏
You must have heard many times: Thank you!
this as been very helpful
watching this after playing flex zombies is amazing
JusTiFy content ---- i feel you!
love you tutorials Kevin
Amazing video.truly the best on flexbox.
By the way..that single disliker.who???
Lol, there always has to be someone!
@kevin powell Awesome Brilliant Outstanding superb
Thank you!
So glad that you liked it!
it seems like `align-items:center` functions the same as `align-content:space-around` in terms of content that has wrapping involved
Should we follow along in VSC when we watch these videos?
01:35 Why all these classes? Couldn't we just select the direct children of the container? Less code in HTML and more DRY (less repetitive).
03:00 What happens to the margins of the items? Do they still collapse or not? Does it depend on the main direction?
So the main axis goes across but the cross axis goes down.... hmmm not at all intuitive. lol. I love your approach very scientific "use one if its wrong use the other". Man I did that with three wives that didn't work out so well for me. Grab another beer and try again.😄
Amazing tutorial thanks
I feel this series would be perfect, if the final video featured workarounds for IE and Safari flex bugs.
While I know IE has issues, curious which Safari bugs you're referring to.
@@KevinPowell Sorry, I just realised most of them are fixed, I guess. Here is a good source of flexbugs for IE and Safari, of which most (or even all) are fixed for Safari: github.com/philipwalton/flexbugs
I’m using visual studio and I can’t see the modifications until I go to Google to check my index, what are you using to code and watch instantly the modifications???
great tutorial!!
Looks cool, i never used it before, wanna try it...
Flexbox is amazing. It can be a bit overwhelming at first because there are a lot of properties, but just how easy it is to have a parent div with three child divs inside... give the parent a display: flex; and you have columns... and you don't need clears! Amazing.
Thanks for your videos.
No problem!
Thanks
Hello,how can you split the editor like this, I am new to vs code but its seems way more easier to just have the css right below the html and the browser to the right.
Please advise,thanks!
Why make a whole different file for CSS when you have the style tag?
Making a different CSS file is most flexible in case there are more than one page on a website because with an external style sheet, you can change the look of an entire website by changing just one file. You don't have to manually change each style tag in each HTML file.
thanks!
Dude, thank you for having a tiny intro
00:38 | Flexbox Subjects
We can make a fully responsive website, WITHOUT using Media Queries?
ur legend
So I know HTML and CSS and floats so would you recommend getting into flex box so I can avoid using floats and clears in the future?
I would! It is a bit more complicated, but it is more intuitive as well in my opinion, and gives you a lot more control. Floats are clears aren't going to be relevant for much longer, except for a few minor things (not so much layout stuff anyway).
How many CSS properties only affect 1 level of nesting?
Thank YOu
I want to have one div being the main content on the left - another two small div at the right - then about three more s div at the bottom. Tried with flexbox but wasnt bale to get this. Obviously each div box will have different size but can't seem to get the about layout
How can you make a complex flexbox layout please? Would appreciate if you make a video for this please
It's a lot to take in at once. I'm at my second viewing right now and know I'll need three or four before I go to the next. There's my truth.
No harm in that at all! Go over it, practice and play with it, revisit it and keep learning!
You're awesome
I like this tutorial. I found it funny that Kevin's voice changes when we go to the tutorial part, is he using two different microphones?
Summer Liu lmfao
Probably in a different room/studio. His voice echoes up and increases the volume
Sorry, really confused about the container thing nothing is working i dont think it applies to what im doing? Would really like some feedback and help
Are you intentionally keeping color scheme in explanation and faceCam consistent? :)
Hahaha, that's hilarious. I wish I could say that I had, lol.
Hello Kevin, thanks from your best instruction and teaching, if possible please rename teach video by number suffixes. Regards
I didn't number these ones because they sort of stand on their own as well, while I made them in a specific order, I'm not sure the order is super important... well except the 3rd one I guess?
Hello, I can't access your given flexbox playground link , kindly update the link.
Oh no, that sucks that it's down 😕
The second one is still working though
I know this is a STUPID question, but where do I find/get Flexbox??
Great
Thank !
Amezing bro really I got what I want
I am from India
Awesome, glad to hear that :D
What is the difference between flex box and CSS grid? Or which one is better?
Flexbox has been around longer and has better browser support. You could build a layout with it today unless you need IE9 support. The Grid is VERY new, and while all the big browsers support it, it's only the newest versions that do, so support isn't as great yet.
Flexbox is 1-dimensional, meaning that it can create either a row or a column. The grid is 2-dimensional. We can create rows and columns at the same time. It also allows us to make rows and columns, and then place content where we need to on the grid. With flexbox, you're creating either a row or column, and then fill it up with the divs you need.
Thank You!!! :)
always reminds me of the closing tag for fragment in react
always found it funny how `flex-direction: row` looks like columns and `flex-direction: columns` looks like rows
Greaaaaat !!!
Thanks :D
How do you start a portfolio for beginners? Like where do you start?
Start with something simple! Find some layouts on line, or sketch something out, and see if you can put it together! I do have a few series on building pages from scratch that might help as well.
Amazing tutorial but I still don't get the align content part
are flex-flow and flex direction the same?
flex-flow is a shorthand property, lets you define the flex-direction and flex-wrap at the same time, like 'flex-flow: row wrap'
Thank you a lot
i wish i learned flexbox sooner
Some grid CSS is new to me.. : autoflow/minmax