6 Advanced Flexbox Features You Probably Don’t Know

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

[@sajjadkazemi]

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

[@user-kf1gz7xg1c]

Would be great

[@zaidkamil]

Yes please do those

[@ofeenee]

Yes please!

[@users9722]

+

[@SaiponathGames]

👍

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

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

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

[@Rizwana121]

Wow. Great video. To the point and every second is increasing my knowledge. Thank you 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!

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

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

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

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

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

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

[@yt-sh]

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

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.

[@BMikel]

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

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

[@Brunoenribeiro]

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

[@Landon_Hughes]

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

[@chezchezchezchez]

Awesome content! I learned a lot about Flex-basis

[@CaliburPANDAs]

Kyle with these BANGERS. keep it up 💪🏻

[@andySip808]

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

[@linuxsever5727]

Amazing video! Thanks a lot man!

[@dominicanfrankster]

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

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

[@abubakar_bd]

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

[@ibgib]

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

[@alexg4927]

Brilliant video, thanks!

[@iJuce]

Please do even more of these !

[@jorgegamboa5408]

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

[@dalsi1542]

Amazingly useful!

[@eagleman98]

i finally understand the flex shorthand, thanks 👍

[@tropicalverktaki]

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

[@mahmoudmashoun5002]

First time hearing in the writting mode . Thanks

[@ahmedam77]

Great video!

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

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

[@thecutedreamkostasp.4449]

Last tip is priceless thx!

[@wdsenjoyer9960]

Great content!

[@dericbytes]

very useful. thanks

[@owaiszahoor5283]

Thank you for this content

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

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

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

[@Human_Evolution-]

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

[@wildwolf637]

it's like the movie inception! Love it!

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

[@pauls1883]

Good to see the mandatory guitar in the background.

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

[@ahsath]

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

[@gillbates9668]

That margin part was very useful for me

[@charbelboughazale3994]

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

[@whonayem01]

Thanks a lot.

[@dr.d3600]

So much quite awesome skill, how cool you are😎

[@Kim-by5uy]

I feel happy that I already knew all of these

[@abd-ulbasit]

Thanks

[@abdullahawisimulaha]

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

[@johnm8358]

Best flexbox tutorial?

[@vinodbavisetti5926]

thank u.

[@amoliski]

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

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

[@calistusobeke7520]

Awesome

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

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

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

[@pouriyanourouznejad7090]

Kevin told us about these 😁

[@AlvinIsChipmunk]

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

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

[@freespeech515]

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

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

[@emilOnYoutube]

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

[@weishanchew]

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

[@BGdev305]

You are the Michael Jordan of code

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

[@leeblackburn3571]

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

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

[@overwatch9659]

🙏🏽

[@carteblanche9165]

How to set vertical and horizontal gap separately?

[@judody5]

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

[@khaled-dev]

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

[@geforcesong]

margin auto rocks

[@catalinim4227]

the width of elements for flex should be flex-basis

[@gwemula]

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

[@mikeonthebox]

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.

[@abderrahimtamda3990]

100%

[@lucienchu9649]

flex-shrink and flex-basis always confuse me.

[@Anth-ony]

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

[@chrisfelicien]

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

[@teippiviritykset]

gap does not work in Safari, that's horrible

[@rishiraj2548]

🙏👍

[@yadav_rupak]

Love From Nepal ❤️

[@adityajoshi2869]

damn, kati chito bro 😆

[@yadav_rupak]

@@adityajoshi2869 haha , nepali honitw

[@JasonJA88]

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

[@Martinit0]

Mind the gap!

[@ReligionAndMaterialismDebunked]

REM is better than PX. :3

[@mohammed.haydar]

First

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

[@mikeonthebox]

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.

[@alanklm]

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

[@masterloot]

This guy talked 15 min straight without a pause. 😅

[@mosesjurassic3686]

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.