6 Advanced Flexbox Features You Probably Don’t Know

Подписаться 1,6 млн

Просмотров 109 тыс.

50% 1

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

Опубликовано:

4 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 134

@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 9 месяцев назад

👍

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

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

@Rizwana121 Год назад

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

@clevermissfox 7 месяцев назад

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!

@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

@kyleb8117 3 месяца назад

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.

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

@yt-sh Год назад

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

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

@BMikel Год назад

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

@Brunoenribeiro Год назад

The flex-basis part was so helpful... 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.

@adityanayak01 Год назад

Love this and ur CSS Course.

@CaliburPANDAs Год назад

Kyle with these BANGERS. keep it up 💪🏻

@linuxsever5727 Год назад

Amazing video! Thanks a lot man!

@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 6 месяцев назад

exactly😅😅

@dominicanfrankster Год назад

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

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

@alexg4927 Год назад

Brilliant video, thanks!

@pauls1883 Месяц назад

Good to see the mandatory guitar in the background.

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

@andySip808 Год назад

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

@Landon_Hughes Год назад

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

@iJuce Год назад

Please do even more of these !

@abubakar_bd 2 месяца назад

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

@dalsi1542 Год назад

Amazingly useful!

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

@ahmedam77 9 месяцев назад

Great video!

@ibgib Год назад

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

@jorgegamboa5408 Год назад

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

@dericbytes Год назад

very useful. thanks

@eagleman98 8 месяцев назад

i finally understand the flex shorthand, thanks 👍

@wdsenjoyer9960 Год назад

Great content!

@tropicalverktaki Год назад

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

@owaiszahoor5283 Год назад

Thank you for this content

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

@thecutedreamkostasp.4449 Год назад

Last tip is priceless thx!

@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

@mahmoudmashoun5002 Год назад

First time hearing in the writting mode . Thanks

@gillbates9668 Год назад

That margin part was very useful for me

@charbelboughazale3994 Год назад

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

@Kim-by5uy Год назад

I feel happy that I already knew all of these

@Human_Evolution- Год назад

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

@ahsath Год назад

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

@wildwolf637 Год назад

it's like the movie inception! Love it!

@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

@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

@whonayem01 Год назад

Thanks a lot.

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

@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

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

@dr.d3600 Год назад

So much quite awesome skill, how cool you are😎

@abdullahawisimulaha Год назад

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

@amoliski Год назад

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

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

@abd-ulbasit Год назад

Thanks

@calistusobeke7520 Год назад

Awesome

@johnm8358 Год назад

Best flexbox tutorial?

@vinodbavisetti5926 Год назад

thank u.

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

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

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

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

@carteblanche9165 Год назад

How to set vertical and horizontal gap separately?

@judody5 Год назад

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

@overwatch9659 Год назад

🙏🏽

@emilOnYoutube Год назад

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

@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

@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

@freespeech515 Год назад

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

@leeblackburn3571 6 месяцев назад

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

@khaled-dev Год назад

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

@BGdev305 Год назад

You are the Michael Jordan of code

@catalinim4227 Год назад

the width of elements for flex should be flex-basis

@weishanchew 11 месяцев назад

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

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

@yadav_rupak Год назад

Love From Nepal ❤️

@adityajoshi2869 Год назад

damn, kati chito bro 😆

@yadav_rupak Год назад

@@adityajoshi2869 haha , nepali honitw

@gwemula Год назад

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

@Anth-ony Год назад

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

@abderrahimtamda3990 Год назад

100%

@geforcesong Год назад

margin auto rocks

@lucienchu9649 Год назад

flex-shrink and flex-basis always confuse me.

@JasonJA88 Год назад

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

@rishiraj2548 Год назад

🙏👍

@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

@alanklm Год назад

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

@ReligionAndMaterialismDebunked Год назад

REM is better than PX. :3

@Martinit0 Год назад

Mind the gap!

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

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