This Advanced Flexbox Trick Is Amazing! 

Full Video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1zKX71GYisE.html

Flex box finally something in css that works as expected.

This is one of the greatest benefits to flex box for some reason I’ve never used. Love it 🎉

Holy frick I never thought of that, thanks Kyle, I always used to wrap middle contents with another flexbox and then do justify-content space between.

Feels like a hack to use margins for this

The real pain comes when having to do responsive design with the wrapping of flexbox elements with dynamic widths

This has been my go to way of making my footer stick to the bottom of the screen in all my layouts 🚀

that was sick !! i always tend to flex-box justify center the middle one

Bruh… ive been trying to find a shortcut to what you did in the end there for literally years 😂 thank you for finally closing that search

Thanks homelander for the valuable information 😀

That’s super useful for building navigation

you can do margin bottom and top auto as well when it's a column direction ⬇️ i believe.

This guy is in the wrong profession, he should be in the movies

Thank you! You just saved me from nested divs madness. 😀

Align-self...

Kyle only uploads BANGERS

When I first found this Out, was mindblowing 🤯 I use this very often

thank you. i searched a solution like this over months 💪🏻

Where were you all these days? Awesome tip. Thanks a lot dude.

Creating navbar a little less wordy now.

Very useful Tip that I didn't know. I have faced problems making navigation bars now I will just use this!.

Flexbox is one of the best things that happened in CSS.

I’ve been looking for this solution for a long time! I never knew margin-left: auto would have such an effect

after watching this guy for a while and seeing the dream face reveal, i am 100% convinced this is either dream doing a hobby or it's his long lost twin

I remember life before flexbox. I feel like the old people who talk about how they had to walk to school lol

Such a quick and easy fix. Thanks for this.

this is so useful for header with avatar and navs

Love your videos my brother, straight to the point!

Lightbulb, lightbulb, lightbulb!!! I never thought of doing that :first-child or :last-child "hack" to flexbox to position a whole group of things. Wow!!

You can also use :nth-child()

I had to wrap stuff into redundant divs for this use case. I know better now.

Thanks. Your content is always reliable and straight to the point. There exist a jackass with a very popular channel who always starts coding in the middle of his content while only showing half the code. His github is also nearly blank. I guess he is trying to sell content. You sir are awesome. You are not the Jackass.

Thank you!

All the contents you posted are amazing....

i was looking for this , helped me thanku

I just love this guy.

that's exactly what i need right now

try to do the same but with multiple lines 😉

I've mostly used margin auto on the center element within a flexbox container. Thanks for the tip.

Instead of margin-left and -right, I recommend using margin-inline-start margin-inline-end. This way even if the website's direction changes to right to left, the auto margin won't break as it adapts

Just what I have been looking for. Thanks alot bro

Flexbox was probably one of the best additions in the history of CSS. Goodbye to float:left and clearfix hacks. It makes layouts so much easier and versatile.

thanks a lot this helps a lot with headers

Wow 😱 amazing! Thank you so much

Thanks!

It's a good idea putting "flex-shrink: 0;" when using auto margins, because you might end up shrinking the rest of the elements on some browsers. ✌

Thanks

I love your css videos

thanks man

I would rather use "align-self" and "justify-self" instead of margin for placing items in the container

Wow,perfect teacher

This is really helpful!

This is awesome, I’ll definitely use it

That was amazingg!!

flex:1 laughing in corner

Nice! I will be using that in the future.

Thanks , that was helpful

instead of using marging use align-content:space-around;

thank you, darling, this is helpful, I currently building a responsive website using flexbox and grid template

Flex box really flexible

Yeah flex is pretty sweet, though does feel like I sometimes overuse it.

My savior

me acabas de salvar de un dolor de cabeza que tengo con unas alineaciones en algo que estoy desarrollando, gracias :D

I learned this from Kevin, but nice trick!

I love flex-box, but I can I can never remember anything and basically trial and error my way around till it looks right.

I feel proud because I knew it for a long time

I use this a lot of times

nice sir i really like your of your toturials there are many things that im learning from your toturials 💖💖💖 thanks.

Goddamn i always used to wrap them in different boxes

This is pretty cool,I always had to use justify between 🤣

the way I do it is with 2 boxes, the outer one and the middle one and then space between. never thought of doing it this way but again while I'm okay at CSS I'm not excellent at it lol

Awesome thx bro

I would have made an empty element with flex grow on it but I guess that’s fine

Great for building navbars.

I will add on flex item : the gap of 2 and have it as margin

this trick is very useful if i mean logo is meant to be at right and searchbar or other stuff at other side 🎉🎉

Thanks it’s for this realy good trick

cool, cool. thanks, Cyle!

But why does margin's "auto" behave this way?

thts wht i exactly needed

Let's guess some best uses: Headers, nav bars,..

Boss I have advanced flexbox knowledge. Boss: that's nice.

I need a video on the longest way to center a div, more code == more better

Y it is always ur shorts are easy to understand

What about breaking it into two container within flex box ? I think that’s what I’ve been doing since forever.

grid is the best

Great work. Audio not clear.

Umm anyone else who's going to make navbars with this😂😂

But what if you do want a margin-right on the element in case the viewport is so small that there is no extra space?

flex box the best property in css

Would the two middle ones be second child and third child?

Already knew that

The truth which matrix stuck people can't understand.

Damn that’s amazing

Pro Tip: have 3 containers and justify space-between 😎

What about align-self

I was not even aware of it😂

The real problem with websites is all browsers don't act the same way.

Lets more plzzz 🎉🎉

3 rows and 3 columns 9 div i whant .