6 Advanced Flexbox Features You Probably Don’t Know
ฝัง
- เผยแพร่เมื่อ 30 มิ.ย. 2024
- You probably use flexbox every time you write CSS, but you probably don’t know all the advanced features of flexbox. In this video I will be covering 6 of the most important flexbox features that you have probably never used, but you should definitely know.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:50 - Gap
02:04 - Writing Direction
04:23 - Align Content
06:15 - Flex Shorthand
08:49 - Flex Basis
13:16 - Auto Margins
#Flexbox #WDS #CSS
Can you make videos about "scroll snap" , "subgrid" and "container query" . Thanks 👍
Would be great
Yes please do those
Yes please!
+
👍
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
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?
Wow. Great video. To the point and every second is increasing my knowledge. Thank you so much.
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!
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!
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.
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.
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.
I now understand how the flex-basis works! This should help tremendously in setting up an online store I'm building-Thank You Kyle!
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
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😅😅
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!
Thank you for this! Always wanted to know more about flex box
Kyle with these BANGERS. keep it up 💪🏻
This is absolutely fabulous stuff. I didn't know many of these tricks.
The flex-basis and width explanation is SUPER helpful!
Thank you for saving me from future headaches at work ✊
Love this and ur CSS Course.
The flex-basis part was so helpful... thanks!
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!
Amazing video! Thanks a lot man!
Awesome content!
I learned a lot about Flex-basis
Didn't know about gap. Always thought that was just a css grid thing.
Thank you!
Brilliant video, thanks!
Please do even more of these !
Another hit. I'll have to re-watch the flex-basis part a couple of more times 😂
It's a really awesome video. Thank you so much for your video.
Had no idea on the auto margins and like many, the wrong idea on flex basis. Thanks a lot!
Amazingly useful!
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.
I gave it a like before even watching it, that’s what my expectations are in this channel.
i finally understand the flex shorthand, thanks 👍
Great video!
Great content!
I didn't know about the auto margins, very cool.
Thank you for this content
Im soooo happy I knew all 6 and its really thanks to you so thank you Kyle
No you didn't
Last tip is priceless thx!
very useful. thanks
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?
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 :)
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%.
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
Good to see the mandatory guitar in the background.
That margin part was very useful for me
i love the fact that the thumbnail image worked for me haha, really struggle with those flex properties
Gap is a the only thing useful for me.
Thanks homie.
Thanks a lot.
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
it's like the movie inception! Love it!
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.
Just in Time when i needed to use flexBoxes, THANK YOUUUU!!!!!!!!!!!!!!!!!!!!!
I feel happy that I already knew all of these
So much quite awesome skill, how cool you are😎
I will indeed have a good day, thanks to this video.
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
actually you have column-gap and row-gap in flex as well, so you can further custimize these wrapped spacing ;)
Wow, the gap property is a game changer for me, time to go refactor a few thousand lines of styles...
Best flexbox tutorial?
Thanks
thank u.
Awesome
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.
Didn't know about the writing direction thing, was using only flex-direction:column all this while :/
🙏🏽
"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.
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
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.
No need for many divs then. Create table with minimal css flex. For Datagrid
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
Kevin told us about these 😁
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.
How to set vertical and horizontal gap separately?
You can use row-gap and column-gap ;)
the width of elements for flex should be flex-basis
I thought "flex: 1" sets "flex-shrink" to 1, not 0? (at 7:50)
7:57 isn't flex shrink set to 1?
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.
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
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'm sure you already knew all this also, but as shown when you try to use them they never produce the expected outcome in the first try.
Love From Nepal ❤️
damn, kati chito bro 😆
@@adityajoshi2869 haha , nepali honitw
when you are stuck at this exact thing and it gets into you recommendations from heaven 🙏😇
flex basis 😵💫😵💫😵💫😵💫😵💫
flex-shrink and flex-basis always confuse me.
🙏👍
margin auto rocks
100%
I couldn't get past you spelling out R.E.M. instead of just saying "REM" lol.
I've written too much CSS didn't see anything new 😢... .box:nth-child(3n+2){margin-left: auto;} for that last example
gap does not work in Safari, that's horrible
Hey Kyle i think king of css is watching this i'll ask for batle😀😀😀😀😀😀
REM is better than PX. :3
Mind the gap!
First
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.
this doesn't sound like something advanced to me.. do people really miss this things about flexbox?
It doesn't make sense. If someone is "A Master of Flexbox" they sure heard all of them. Otherway what ind of "Masters" would they be.
Sorry, man, you lost me at the fixed height scenario. Why would you EVER use fixed height? These "advanced" features are all well and good, but most users will never in their life think about changing the text direction. You answered a lot of questions that many users will never ask. But that's probably just me.