Really appreciated the "flex:" command breakdown. I read a guide on flexbox and it sort of made sense but it was really nice to see it in action and explained thoroughly (especially the flex-basis part). Really like the auto margin trick. Gonna try to keep that one in mind for the future.
I love this! There are so many times when my CSS gets all complicated to do just one simple thing. Now, with flex I'm able to accomplish what my website needs. Thank You!
Can you make a video clarifying how to use images in flexbox? I always find that it's difficult to get the two working together, especially with dynamically scaling images inside flex
The explanation for the flex-basis was actually really helpful because I also thought it was just basically a copy of width just for the flex context. Thanks!
Only i didn't know writing-mode property but thanks to you i learned it. Also there is worthy details about flex grow-shrink-basis properties way of working, so thank you.
@@triscuit5103 Ne alakası var? Bu kodların çoğunu kevin powell ve netninja kullanırken görmüşdüm. Flex ile alakalı en temel kodları ve "flex-wrap: wrap;" kodunu bizzat bende kullandım. Elbetde bu işi kyle kadar iyi bildiğimi iddia etmiyorum ama adam madem videosunun sonunda "bunların hangilerini evvelce biliyordunuz yazın" mealinde talebde bulunmuş bende ona binaen yazdım. Niye bu kadar hazımsızlık tecrübe etdin onu anlamadım :D
@@haliszekeriyaozkok4851 aşırı iyisin ya müthişsin, bir tek writing mode bilmiyordum diye yazan bir kişi bile yok, en şampiyon sensin rabbime Muhammede yeminler olsun bismilaaaahahahah
This video rocks, having a great time following along! However, I'm already a wizard at this just from playing flexbox zombies (covers most of these "advanced" tricks.), but also a shout out to flexbox froggy.
Amazing! Thank you so much. I haven't used flex basis so far but its really helpful, I also didn't know I had to include wrap when I need to justify horizontally.
Great video. It would be nice if you could have squeezed in how min/max-width and overflow interact with flex-basis. Imho this gets important when using flexbox for positioning components/widgets.
When you use flex: 1, it is equivalent to flex: 1 1 0%. This means that the element will have a flex-grow value of 1, a flex-shrink value of 1 (not 0), and a flex-basis value of 0%.
The gap property is indeed fantastic, it makes building layouts and grids soooo much easier. Twenty years ago people would faint in shock if they would see what modern CSS can do :)
Thank you for this. I found you in my journey to discover how to utilize FLEXBOX with an 'On-scroll Sticky Nav' that will 'break' at 760px to hide under the hamburger. I have found info on the sticky, and on the hamburger, but getting them to play together has been eluding me. Of course working til 1am and later doesn't help. I'd love for someone to give an explanation on the failsafe way to insert snippets of code, like from github or codepen into a file, and make it work. I know, that's a lot to wish for. finding the right rhythm/path to learning to troubleshoot would be a good topic, maybe?
You're right, flex-basis is mystifying! But, you didn't treat like it is: hard to understand. Could you do another video on the relationship between element width and its flex-basis? Please.
I have done like 16 frontend mentor project and i never used flex shrink/grow/basis the thing is i used flexbox for all the project i think it's time to use the flex property thanks kyle
I have been using the gap property for a while really love it. but I found out that it's not supported in internet explorer and Microsoft edge browsers. can you write a good polyfill @supports for it. but wait... @supports isn't supported in those browsers 😅. Kyle say STH Please.
For the flex-basis part, that means changing the flex-basis of the second child to 200px is the same as setting its width only to 200px, am I right? If that's the case, then what's the point of having flex-basis, can't we just use the width?
Bro, I want to ask for advice, what's good, for those who learn JavaScript, it's better to go directly to node.js or react.js? Or is there still something I still have to learn?
Node is a runtime environment, it’s not really something you have to learn. It just lets you run JS outside of a browser I would absolutely just learn vanilla JS before React or any framework. In fact, I would even learn any more strongly typed language before a framework, like C++ or Java. Or even typescript. That way, you’re already thinking more on a low-level and you’re more prepared when you encounter errors, which you will.
"You are probably familiar with flex-grow, flex-shrink and flex-basis, but you probably don't know about the shorthand flex property" 👉 well, that is the exact opposite, most people know about flex, but a lot less know about the 3 others.
can you please tell me the use case of writing mode
2 роки тому
It is used if writing in Chinese or Hebrew. It can also be helpful if you have design where text is rotated by 90%. Unlike rotating with tranform it is still participating in layout.
Hi there, needless to say how much I appreciate your content. However, I'll be great if you could throw in some real examples, or small project of your own that showcases these techniques.
Dear brother : I saw your videos all are very useful to me grow my career, but u speak speed, please speak little bit slow some times i can't understand your words, because I am from non native English speaker basics , This is my kind request.
1:45 min in and already able to wipe out a bunch of complexity in my css thanks to gap.
Really awesome tip! Thank you!
Ikr? When I learnt about gap it's now everywhere. Sometimes I feel like I'm overusing them/using them in the wrong applications but hey! It works
@@hikari1690 yeah, I was just using margins on pseudo classes but this is much easier
Can you make videos about "scroll snap" , "subgrid" and "container query" . Thanks 👍
Would be great
Yes please do those
Yes please!
+
👍
Really appreciated the "flex:" command breakdown. I read a guide on flexbox and it sort of made sense but it was really nice to see it in action and explained thoroughly (especially the flex-basis part). Really like the auto margin trick. Gonna try to keep that one in mind for the future.
Last margin auto part will be really helpful.. I am always struggling with this in Hybrid Applications.
what's a hybrid application?
where would it be helpful?
This was super helpful; filled in a lot of gaps in my knowledge.
Flexbox is truly amazing.
A video like this about CSS grid would also be awesome.
Wow. Great video. To the point and every second is increasing my knowledge. Thank you so much.
I now understand how the flex-basis works! This should help tremendously in setting up an online store I'm building-Thank You Kyle!
I love this! There are so many times when my CSS gets all complicated to do just one simple thing. Now, with flex I'm able to accomplish what my website needs. Thank You!
Flex grow, flex shrink and flex basis are properties that just aren't sticking with me. This video def helped get me closer though, thank you!
The most powerful part of flex is that three
@archicoders7560 haha yes, I am much more useful with th flex properties now 😆 I love flex grow and wrap
Another hit. I'll have to re-watch the flex-basis part a couple of more times 😂
Can you make a video clarifying how to use images in flexbox? I always find that it's difficult to get the two working together, especially with dynamically scaling images inside flex
Kyle with these BANGERS. keep it up 💪🏻
This is the best video about flexbox's ever dawg thanks so much
The explanation for the flex-basis was actually really helpful because I also thought it was just basically a copy of width just for the flex context. Thanks!
I gave it a like before even watching it, that’s what my expectations are in this channel.
The flex-basis part was so helpful... thanks!
Only i didn't know writing-mode property but thanks to you i learned it. Also there is worthy details about flex grow-shrink-basis properties way of working, so thank you.
yav hee hee gardas oyle tabii
@@triscuit5103 Sana ve diğerlerine yalan borcum mu var?
@@haliszekeriyaozkok4851 yok tabii hiç olur mu? Hepsini biliyorsundur sen en şampiyon sensin en iyi sensin onu diyorum ben de işte topraaaam
@@triscuit5103 Ne alakası var? Bu kodların çoğunu kevin powell ve netninja kullanırken görmüşdüm. Flex ile alakalı en temel kodları ve "flex-wrap: wrap;" kodunu bizzat bende kullandım. Elbetde bu işi kyle kadar iyi bildiğimi iddia etmiyorum ama adam madem videosunun sonunda "bunların hangilerini evvelce biliyordunuz yazın" mealinde talebde bulunmuş bende ona binaen yazdım. Niye bu kadar hazımsızlık tecrübe etdin onu anlamadım :D
@@haliszekeriyaozkok4851 aşırı iyisin ya müthişsin, bir tek writing mode bilmiyordum diye yazan bir kişi bile yok, en şampiyon sensin rabbime Muhammede yeminler olsun bismilaaaahahahah
This video rocks, having a great time following along!
However, I'm already a wizard at this just from playing flexbox zombies (covers most of these "advanced" tricks.), but also a shout out to flexbox froggy.
Love this and ur CSS Course.
Hey Kyle, thanks for this video, now I know how to position certain elements in flexbox, which I wouldn't have known without this tutorial. Cheers!
Had no idea on the auto margins and like many, the wrong idea on flex basis. Thanks a lot!
Thank you for this! Always wanted to know more about flex box
This is absolutely fabulous stuff. I didn't know many of these tricks.
Didn't know about gap. Always thought that was just a css grid thing.
Thank you!
i finally understand the flex shorthand, thanks 👍
Amazing! Thank you so much. I haven't used flex basis so far but its really helpful, I also didn't know I had to include wrap when I need to justify horizontally.
exactly😅😅
Great video. It would be nice if you could have squeezed in how min/max-width and overflow interact with flex-basis. Imho this gets important when using flexbox for positioning components/widgets.
Amazing video! Thanks a lot man!
Gap is a the only thing useful for me.
Thanks homie.
I didn't know about the auto margins, very cool.
When you use flex: 1, it is equivalent to flex: 1 1 0%. This means that the element will have a flex-grow value of 1, a flex-shrink value of 1 (not 0), and a flex-basis value of 0%.
The gap property is indeed fantastic, it makes building layouts and grids soooo much easier.
Twenty years ago people would faint in shock if they would see what modern CSS can do :)
Just in Time when i needed to use flexBoxes, THANK YOUUUU!!!!!!!!!!!!!!!!!!!!!
The flex-basis and width explanation is SUPER helpful!
Thank you for saving me from future headaches at work ✊
First time hearing in the writting mode . Thanks
Thank you for this. I found you in my journey to discover how to utilize FLEXBOX with an 'On-scroll Sticky Nav' that will 'break' at 760px to hide under the hamburger. I have found info on the sticky, and on the hamburger, but getting them to play together has been eluding me. Of course working til 1am and later doesn't help.
I'd love for someone to give an explanation on the failsafe way to insert snippets of code, like from github or codepen into a file, and make it work. I know, that's a lot to wish for. finding the right rhythm/path to learning to troubleshoot would be a good topic, maybe?
Please do even more of these !
Last tip is priceless thx!
It's a really awesome video. Thank you so much for your video.
it's like the movie inception! Love it!
Awesome content!
I learned a lot about Flex-basis
Amazingly useful!
Im soooo happy I knew all 6 and its really thanks to you so thank you Kyle
No you didn't
i love the fact that the thumbnail image worked for me haha, really struggle with those flex properties
Brilliant video, thanks!
I feel happy that I already knew all of these
7:57 isn't flex shrink set to 1?
You're right, flex-basis is mystifying!
But, you didn't treat like it is: hard to understand.
Could you do another video on the relationship between element width and its flex-basis? Please.
That margin part was very useful for me
I have done like 16 frontend mentor project and i never used flex shrink/grow/basis
the thing is i used flexbox for all the project
i think it's time to use the flex property
thanks kyle
Wow, the gap property is a game changer for me, time to go refactor a few thousand lines of styles...
Good to see the mandatory guitar in the background.
Is there a way to make boxes 234 jump on the second row while box 1 and 5 stay in the first row when there is not enough space for all 5 of them?
Great content!
I knew all of these properties, but a great useful video anyways ❤👍🏼
No you didn't
@@Rust_Rust_Rust u right
@@Rust_Rust_Rust and I'm wrong , and yeah u know u r right and I'm wrong
I thought "flex: 1" sets "flex-shrink" to 1, not 0? (at 7:50)
very useful. thanks
actually you have column-gap and row-gap in flex as well, so you can further custimize these wrapped spacing ;)
Best flexbox tutorial?
Thank you for this content
So much quite awesome skill, how cool you are😎
I will indeed have a good day, thanks to this video.
11:47 Confirmed fixed gear rider
I have been using the gap property for a while really love it. but I found out that it's not supported in internet explorer and Microsoft edge browsers. can you write a good polyfill @supports for it. but wait... @supports isn't supported in those browsers 😅. Kyle say STH Please.
For the flex-basis part, that means changing the flex-basis of the second child to 200px is the same as setting its width only to 200px, am I right? If that's the case, then what's the point of having flex-basis, can't we just use the width?
I think if you set width property, that element will not be able to grow, maybe you can use min-width property.
with flex property set to 1, besides flex-grow:1 and flex-basis-0..... the flex-shrink property is defaulted to 1 instead of 0
Thanks
Thanks a lot.
Bro, I want to ask for advice, what's good, for those who learn JavaScript, it's better to go directly to node.js or react.js? Or is there still something I still have to learn?
Node is a runtime environment, it’s not really something you have to learn. It just lets you run JS outside of a browser
I would absolutely just learn vanilla JS before React or any framework. In fact, I would even learn any more strongly typed language before a framework, like C++ or Java. Or even typescript. That way, you’re already thinking more on a low-level and you’re more prepared when you encounter errors, which you will.
Kevin told us about these 😁
in child elements why he added `flex-wrap:wrap` as it is a property of the container the holds child can anyone enlighten me on this ? video mark 1:35
"You are probably familiar with flex-grow, flex-shrink and flex-basis, but you probably don't know about the shorthand flex property" 👉 well, that is the exact opposite, most people know about flex, but a lot less know about the 3 others.
thank u.
Didn't know about the writing direction thing, was using only flex-direction:column all this while :/
How to set vertical and horizontal gap separately?
You can use row-gap and column-gap ;)
can you please tell me the use case of writing mode
It is used if writing in Chinese or Hebrew. It can also be helpful if you have design where text is rotated by 90%. Unlike rotating with tranform it is still participating in layout.
How to center div element in HTML5???
No need for many divs then. Create table with minimal css flex. For Datagrid
Awesome
I use flexbox daily, I thought you can't say nothing new to me, but I was wrong, luckilly :)
You are the Michael Jordan of code
I wish I have this video two weeks ago as one week ago I failed an interview due to I knew nothing about the "gap" T.T
gap does not work in Safari, that's horrible
🙏🏽
flex basis 😵💫😵💫😵💫😵💫😵💫
the width of elements for flex should be flex-basis
Love From Nepal ❤️
damn, kati chito bro 😆
@@adityajoshi2869 haha , nepali honitw
margin auto rocks
when you are stuck at this exact thing and it gets into you recommendations from heaven 🙏😇
flex-shrink and flex-basis always confuse me.
🙏👍
I couldn't get past you spelling out R.E.M. instead of just saying "REM" lol.
Hi there, needless to say how much I appreciate your content. However, I'll be great if you could throw in some real examples, or small project of your own that showcases these techniques.
I've written too much CSS didn't see anything new 😢... .box:nth-child(3n+2){margin-left: auto;} for that last example
Hey Kyle i think king of css is watching this i'll ask for batle😀😀😀😀😀😀
100%
REM is better than PX. :3
Mind the gap!
this doesn't sound like something advanced to me.. do people really miss this things about flexbox?
Dear brother : I saw your videos all are very useful to me grow my career, but u speak speed, please speak little bit slow some times i can't understand your words, because I am from non native English speaker basics , This is my kind request.