This Advanced Flexbox Trick Is Amazing!

Full Video: • 6 Advanced Flexbox Fea...
🌎 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
#Shorts

[@WebDevSimplified]

Full Video: th-cam.com/video/1zKX71GYisE/w-d-xo.html

[@fitnessfreaksmotiv]

jj

[@tegotypunikos]

I hate that non-clickable links. It's just official youtube site

[@Pictor13]

​@@tegotypunikos it's to train your memorization skills, after degeneration from too much binge watching 😁

[@drviagrin3798]

@@tegotypunikos highlight, right click, and go to.

[@tonybowen455]

I wish I saw this short so long ago. Watching the full video now, thanks!

[@cherubin7th]

Flex box finally something in css that works as expected.

[@adnanal-beda9734]

Wait until it wraps

[@vothaison]

The most amazing thing about flex box is that IE supports it.

[@proudyy]

​@@vothaisono
But
IE is dead so who cares lol

[@cafelutsa_]

it always worked as expected. this "trick" always worked

[@playvideogames369]

​@@adnanal-beda9734 align-content

[@thedigitalceo]

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

[@creativeturbo]

I think the reason was grid

[@ontheruntonowhere]

@@creativeturbo 🎯

[@thatsalot3577]

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.

[@arhangelohek-UKR]

Yeah. This insane!

[@georgesaunders3532]

Yeah same here 😅

[@keanuclintignacio697]

same! so useful too.

[@aleksd286]

Feels like a hack to use margins for this

[@Lambdaphile]

+1. Wrapping middle elements in a container div and then justifying space between is better I think.

[@Anonemmas]

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

[@PokeBowl82]

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

[@artibansal7406]

animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html

[@SamuelGfeller]

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

[@yourlocalhuman3526]

Yh it pretty much makes it all a pain in the ass

[@alecmather]

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

[@nested9301]

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

[@disgracefulcoder1818]

Thanks homelander for the valuable information 😀

[@marcoscabrinirianidosreis6655]

That’s super useful for building navigation

[@samben08]

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

[@hussainbharmal5998]

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

[@bape155]

Align-self...

[@lady1kaka]

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

[@artibansal7406]

animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html

[@DarylMalibiran]

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

[@CaliburPANDAs]

Kyle only uploads BANGERS

[@alexanderg4404]

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

[@Its_King180]

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

[@dc366]

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

[@AnthonyJackman]

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

[@thegreenroom5820]

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.

[@aakashkhamaru9403]

Creating navbar a little less wordy now.

[@JayantBB78]

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

[@dableb]

Such a quick and easy fix. Thanks for this.

[@Dylan_thebrand_slayer_Mulveiny]

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.

[@mk_57]

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

[@zaroio2533]

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

[@sudhanshukushwaha6351]

flex:1 laughing in corner

[@Dzikrullah_999]

this is so useful for header with avatar and navs

[@CompositeNation]

Love your videos my brother, straight to the point!

[@ayyappan8836]

All the contents you posted are amazing....

[@zagrios6686]

try to do the same but with multiple lines 😉

[@luismiguelcarrionsantamari5390]

It's actually possible 😅👍

[@shinoobie1549]

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

[@Dylan_thebrand_slayer_Mulveiny]

In my day we had to float: left; and clearfix through 10 feet of snow. Uphill. Both ways.

[@GyroCannon]

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

[@FiReLScar]

You can also use :nth-child()

[@proxy5061]

i was looking for this , helped me thanku

[@Noam-Bahar]

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

[@clementborisov7050]

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

[@Navistar-cu2po]

Thank you!

[@devkasunlakshitha]

Wow 😱 amazing! Thank you so much

[@dirudeen1421]

Just what I have been looking for. Thanks alot bro

[@iThou001]

I just love this guy.

[@ashikgurung1236]

Wow,perfect teacher

[@0xPanda1]

thanks a lot this helps a lot with headers

[@karis7539]

that's exactly what i need right now

[@sapokurt2854]

This is really helpful!

[@kalebakeitshokile1366]

I love your css videos

[@user-op4zy8jg9j]

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

[@tresvecesno7071]

Thanks!

[@spidermanclips7966]

Thanks , that was helpful

[@samkroes4611]

This is awesome, I’ll definitely use it

[@mxsniper223]

thanks man

[@kirksurber7262]

Nice! I will be using that in the future.

[@Tikayy]

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

[@wailbrch4071]

As long as it gets the job done

[@ayangjibrut]

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

[@iliyanalinski9385]

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

[@artibansal7406]

animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html

[@fakedevdutt]

That was amazingg!!

[@allthecuteanimals615]

My savior

[@WallaceThiago]

Goddamn i always used to wrap them in different boxes

[@whatsapp176]

Helpline 📲📩⬆️
Questions can come in⬆️

[@MrTomro]

thats actually much better

[@chrisauret3785]

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

[@Bot-lj6nu]

Flex box really flexible

[@rustty321]

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

[@jasonleelawlight]

I learned this from Kevin, but nice trick!

[@rasafchik5791]

Thanks

[@khazifire]

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

[@erdum]

I feel proud because I knew it for a long time

[@mavdotj]

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

[@chawkichalladia1812]

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

[@code4fun22]

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

[@hugodsa89]

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

[@artibansal7406]

animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html

[@SukeDom_YT]

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

[@omegaz4123]

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

[@rproctor83]

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

[@shlokbhakta2893]

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

[@bavidlynx3409]

Are you stupid?

[@flawlessmyles]

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

[@dionysus1210]

I use this a lot of times

[@siddique_]

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

[@Tibiafy]

Awesome thx bro

[@neinnine4592]

cool, cool. thanks, Cyle!

[@JEsterCW]

Great for building navbars.

[@brunosupico2385]

Thanks it’s for this realy good trick

[@blackxdeft5791]

The truth which matrix stuck people can't understand.

[@googlesboy3420]

thts wht i exactly needed

[@asante5979]

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

[@DZ-lp6ls]

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?

[@_Arbaz_98]

Y it is always ur shorts are easy to understand

[@romjmaa3127]

flex box the best property in css

[@s.g.5318]

My content: *commits tax fraud *
Me: your honour, Flex box !

[@offlinehub]

grid is the best

[@RootEntry]

What about align-self

[@xclimatexcoldxx]

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

[@ManasTunga]

I was not even aware of it😂

[@benji9107]

Damn that’s amazing

[@Jrizy.]

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

[@RagneUrak]

Flex box frogyy

[@rishiraj2548]

Great work. Audio not clear.

[@agafonovas]

What about align-self?

[@iamenochlee]

Align self doesn't work with flexbox

[@abdirahmann]

align-self works with *display: grid;*

[@anuvette]

​@@iamenochleeim pretty sure it's justify self that isn't supported by flex. Not align self

[@badis6717]

can you add a tutorial explaining screens , why css behave the way it does with mobile screen in compered to monitors and resolution pixels ...