6 Advanced Flexbox Features You Probably Don’t Know

[@ducksquidbat8315]

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!

[@hikari1690]

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

[@ducksquidbat8315]

@@hikari1690 yeah, I was just using margins on pseudo classes but this is much easier

[@kyleb8117]

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.

[@sajjadkazemi]

Can you make videos about "scroll snap" , "subgrid" and "container query" . Thanks 👍

[@人天-i5s]

Would be great

[@zaidkamil]

Yes please do those

[@ofeenee]

Yes please!

[@users9722]

+

[@SaiponathGames]

👍

[@swanand6300]

Last margin auto part will be really helpful.. I am always struggling with this in Hybrid Applications.

[@wasd3108]

what's a hybrid application? where would it be helpful?

[@CaliburPANDAs]

Kyle with these BANGERS. keep it up 💪🏻

[@Rizwana121]

Wow. Great video. To the point and every second is increasing my knowledge. Thank you so much.

[@dominicanfrankster]

Another hit. I'll have to re-watch the flex-basis part a couple of more times 😂

[@blender3d248]

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!

[@angelavolluz5499]

I now understand how the flex-basis works! This should help tremendously in setting up an online store I'm building-Thank You Kyle!

[@jorgegamboa5408]

I gave it a like before even watching it, that’s what my expectations are in this channel.

[@RocketGorillz]

This is the best video about flexbox's ever dawg thanks so much

[@Lucsy3012]

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!

[@knight_kazul]

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.

[@Brunoenribeiro]

The flex-basis part was so helpful... thanks!

[@palandrascsokan638]

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!

[@adityanayak01]

Love this and ur CSS Course.

[@appuser]

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.

[@clevermissfox]

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!

[@archicoders7560]

The most powerful part of flex is that three

[@clevermissfox]

@archicoders7560 haha yes, I am much more useful with th flex properties now 😆 I love flex grow and wrap

[@Uncaught_in_promise]

This is absolutely fabulous stuff. I didn't know many of these tricks.

[@yt-sh]

Thank you for this! Always wanted to know more about flex box

[@haliszekeriyaozkok4851]

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]

yav hee hee gardas oyle tabii

[@haliszekeriyaozkok4851]

@@triscuit5103 Sana ve diğerlerine yalan borcum mu var?

[@triscuit5103]

@@haliszekeriyaozkok4851 yok tabii hiç olur mu? Hepsini biliyorsundur sen en şampiyon sensin en iyi sensin onu diyorum ben de işte topraaaam

[@haliszekeriyaozkok4851]

@@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

[@triscuit5103]

@@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

[@andySip808]

Didn't know about gap. Always thought that was just a css grid thing. Thank you!

[@willsoe]

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

[@ibgib]

Had no idea on the auto margins and like many, the wrong idea on flex basis. Thanks a lot!

[@EvertJunior]

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.

[@chrishawk118]

exactly😅😅

[@linuxsever5727]

Amazing video! Thanks a lot man!

[@Human_Evolution-]

Gap is a the only thing useful for me. Thanks homie.

[@eagleman98]

i finally understand the flex shorthand, thanks 👍

[@firestormmultigaming8697]

Im soooo happy I knew all 6 and its really thanks to you so thank you Kyle

[@Rust_Rust_Rust]

No you didn't

[@abubakar_bd]

It's a really awesome video. Thank you so much for your video.

[@chezchezchezchez]

Awesome content! I learned a lot about Flex-basis

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.

[@dalsi1542]

Amazingly useful!

[@ahsath]

i love the fact that the thumbnail image worked for me haha, really struggle with those flex properties

[@thecutedreamkostasp.4449]

Last tip is priceless thx!

[@tropicalverktaki]

I didn't know about the auto margins, very cool.

[@iJuce]

Please do even more of these !

[@Landon_Hughes]

The flex-basis and width explanation is SUPER helpful! Thank you for saving me from future headaches at work ✊

[@Acuce7ibd468j]

First time hearing in the writting mode . Thanks

[@charbelboughazale3994]

Just in Time when i needed to use flexBoxes, THANK YOUUUU!!!!!!!!!!!!!!!!!!!!!

[@wildwolf637]

it's like the movie inception! Love it!

[@SoulStitch1111]

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?

[@alexg4927]

Brilliant video, thanks!

[@elco7956]

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%.

[@wdsenjoyer9960]

Great content!

[@mohammed.haydar]

I knew all of these properties, but a great useful video anyways ❤👍🏼

[@Rust_Rust_Rust]

No you didn't

[@mohammed.haydar]

@@Rust_Rust_Rust u right

[@mohammed.haydar]

@@Rust_Rust_Rust and I'm wrong , and yeah u know u r right and I'm wrong

[@dericbytes]

very useful. thanks

[@gillbates9668]

That margin part was very useful for me

[@raisama4314]

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

[@ILoveWordPress]

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 :)

[@NedumEze]

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.

[@owaiszahoor5283]

Thank you for this content

[@amoliski]

Wow, the gap property is a game changer for me, time to go refactor a few thousand lines of styles...

[@Slava-om1sz]

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?

[@Kim-by5uy]

I feel happy that I already knew all of these

[@abdullahawisimulaha]

actually you have column-gap and row-gap in flex as well, so you can further custimize these wrapped spacing ;)

[@dr.d3600]

So much quite awesome skill, how cool you are😎

[@leeblackburn3571]

I thought "flex: 1" sets "flex-shrink" to 1, not 0? (at 7:50)

[@pbryan1967]

Good to see the mandatory guitar in the background.

[@johnm8358]

Best flexbox tutorial?

[@weishanchew]

7:57 isn't flex shrink set to 1?

[@whonayem01]

Thanks a lot.

[@anvayjain4100]

I will indeed have a good day, thanks to this video.

[@abd-ulbasit]

Thanks

[@JaredCaprio]

11:47 Confirmed fixed gear rider

[@boring91]

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?

[@levani7851]

I think if you set width property, that element will not be able to grow, maybe you can use min-width property.

[@julien.roques]

"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.

[@zull_n1594]

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?

[@broomybroomybroomy]

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.

[@AlvinIsChipmunk]

Didn't know about the writing direction thing, was using only flex-direction:column all this while :/

[@krisbude9607]

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

[@emmanuelxs6143]

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.

[@vinodbavisetti5926]

thank u.

[@ajiteshmishra0005]

How to center div element in HTML5???

[@carteblanche9165]

How to set vertical and horizontal gap separately?

[@judody5]

You can use row-gap and column-gap ;)

[@roshanlalsahu7846]

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.

[@pankajbhatt5169]

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

[@pouriyanourouznejad7090]

Kevin told us about these 😁

[@calistusobeke7520]

Awesome

[@teippiviritykset]

gap does not work in Safari, that's horrible

[@freespeech515]

No need for many divs then. Create table with minimal css flex. For Datagrid

[@emilOnYoutube]

I use flexbox daily, I thought you can't say nothing new to me, but I was wrong, luckilly :)

[@RobLao]

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

[@overwatch9659]

🙏🏽

[@catalinim4227]

the width of elements for flex should be flex-basis

[@BGdev305]

You are the Michael Jordan of code

[@lucienchu9649]

flex-shrink and flex-basis always confuse me.

[@gwemula]

flex basis 😵‍💫😵‍💫😵‍💫😵‍💫😵‍💫

[@khaled-dev]

when you are stuck at this exact thing and it gets into you recommendations from heaven 🙏😇

[@geforcesong]

margin auto rocks

[@yadav_rupak]

Love From Nepal ❤️

[@adityajoshi2869]

damn, kati chito bro 😆

[@yadav_rupak]

@@adityajoshi2869 haha , nepali honitw

[@rishiraj2548]

🙏👍

[@Anth-ony]

I couldn't get past you spelling out R.E.M. instead of just saying "REM" lol.

[@JasonJA88]

I've written too much CSS didn't see anything new 😢... .box:nth-child(3n+2){margin-left: auto;} for that last example

[@chrisfelicien]

Hey Kyle i think king of css is watching this i'll ask for batle😀😀😀😀😀😀

[@leonelcenteno3816]

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.

[@ReligionAndMaterialismDebunked]

REM is better than PX. :3

[@alanklm]

this doesn't sound like something advanced to me.. do people really miss this things about flexbox?

[@abderrahimtamda3990]

100%

[@selvamkarthik9605]

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.

[@Martinit0]

Mind the gap!