There's a really common application...Navigation menu sometimes have tabs on the top and profile or settings or something else at the bottom... I just busted my way by adding absolute top margin to the bottom ones...
I learned CSS before grid and flexbox and the shit I have to do to get a really simple template like in the video 😂 flexbox is truly a blessing, I'm learning modern CSS rn cos I need my websites to be mobile friendly, not just hardcoded for 16:9 screens (with scaling depending on the resolution) 😂 I'm only 27, but I remember the times when we used s, then tables, then CSS was meant this big blessing but everything was a pain in the ass, before flexbox but I dropped off around that time (focused on desktop apps, if I did something on the web, it was something small to be used only by me, so I didn't care if it all broke on any other screen resolution (much less aspect ratio) 😅)
That's probably the correct approach. This trick is neat, until you need to translate the layout to the Y axis. Then you are back where you started (vertical auto margins simply don't work)
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
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.
@@ToxicPlayer3597 Very valid concern. There's not enough attention being paid to your concern in these comments. Readability and maintainability go down with complexity. Nesting flexboxes adds complexity.
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!!
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.
This isn’t a flexbox specific thing. This works on any block level element. Like a logo on the top left and you want a list of nav items on the right, set padding-left:auto on the logo and you’re done. Flexbox not explicitly required.
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
CSS is still the vain of my existence from time to time thank god for JSX and “JSS” I hated having to write individual css or scss files for my components or use cases
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
I'm sorry I know this is not a JavaScript based video but can u do a tutorial on JavaScript basics and a crash course showing each of the JavaScript basics on how they're applied I learned a lot from ur videos this is a request I really need
Full Video: th-cam.com/video/1zKX71GYisE/w-d-xo.html
jj
I hate that non-clickable links. It's just official youtube site
@@tegotypunikos it's to train your memorization skills, after degeneration from too much binge watching 😁
I wish I saw this short so long ago. Watching the full video now, thanks!
Hdhdhdis
Flex box finally something in css that works as expected.
Wait until it wraps
The most amazing thing about flex box is that IE supports it.
@@vothaisono
But
IE is dead so who cares lol
it always worked as expected. this "trick" always worked
@@adnanal-beda9734 align-content
This is one of the greatest benefits to flex box for some reason I’ve never used. Love it 🎉
I think the reason was grid
@@creativeturbo 🎯
There's a really common application...Navigation menu sometimes have tabs on the top and profile or settings or something else at the bottom... I just busted my way by adding absolute top margin to the bottom ones...
I learned CSS before grid and flexbox and the shit I have to do to get a really simple template like in the video 😂 flexbox is truly a blessing, I'm learning modern CSS rn cos I need my websites to be mobile friendly, not just hardcoded for 16:9 screens (with scaling depending on the resolution) 😂 I'm only 27, but I remember the times when we used s, then tables, then CSS was meant this big blessing but everything was a pain in the ass, before flexbox but I dropped off around that time (focused on desktop apps, if I did something on the web, it was something small to be used only by me, so I didn't care if it all broke on any other screen resolution (much less aspect ratio) 😅)
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.
Yeah. This insane!
Yeah same here 😅
same! so useful too.
You can also use gap:
That's probably the correct approach. This trick is neat, until you need to translate the layout to the Y axis. Then you are back where you started (vertical auto margins simply don't work)
Flexbox is a game changer in CSS spacings and content alignments are perfect ,easy & more more responsive.
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 was sick !! i always tend to flex-box justify center the middle one
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
This has been my go to way of making my footer stick to the bottom of the screen in all my layouts 🚀
I use min-height:100vh on body and space-between the footer and the rest
It still impresses me just how adaptable layouts can be when using flex box.
I tried to flex my war crimes but couldn't justify it
Flexbox is one of the best things that happened in CSS.
you can do margin bottom and top auto as well when it's a column direction ⬇️ i believe.
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
This guy is in the wrong profession, he should be in the movies
Kyle only uploads BANGERS
Where were you all these days?
Awesome tip.
Thanks a lot dude.
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.
Feels like a hack to use margins for this
+1. Wrapping middle elements in a container div and then justifying space between is better I think.
@@Lambdaphile The question is: How many nested flexbox is too many ?
@@ToxicPlayer3597 Very valid concern. There's not enough attention being paid to your concern in these comments.
Readability and maintainability go down with complexity. Nesting flexboxes adds complexity.
The proper way:
justify-self: start;
and
justify-self: end;
@@karlheinzneugebauer thats grid
Thanks
Thank you! You just saved me from nested divs madness. 😀
this is so useful for header with avatar and navs
Thank you ❤
When I first found this Out, was mindblowing 🤯 I use this very often
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html
Very useful Tip that I didn't know. I have faced problems making navigation bars now I will just use this!.
I spend so much time aligning headers, this looks like it makes it way, way easier.
thank you. i searched a solution like this over months 💪🏻
I’ve been looking for this solution for a long time! I never knew margin-left: auto would have such an effect
this trick is very useful if i mean logo is meant to be at right and searchbar or other stuff at other side 🎉🎉
Love your videos my brother, straight to the point!
Such a quick and easy fix. Thanks for this.
i was looking for this , helped me thanku
Thank you!
All the contents you posted are amazing....
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!!
Wow 😱 amazing! Thank you so much
That’s super useful for building navigation
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.
Just what I have been looking for. Thanks alot bro
This is really helpful!
This isn’t a flexbox specific thing. This works on any block level element. Like a logo on the top left and you want a list of nav items on the right, set padding-left:auto on the logo and you’re done. Flexbox not explicitly required.
I always hate these videos because they make realize I’ve been doing stuff like this the hard way for way to long. Lol great vid keep it up
Thanks!
I just love this guy.
Thanks , that was helpful
Also you can use justify-self, to do it 🔥
thanks a lot this helps a lot with headers
thanks man
I love your css videos
I've mostly used margin auto on the center element within a flexbox container. Thanks for the tip.
This is awesome, I’ll definitely use it
You can also use :nth-child()
Nice! I will be using that in the future.
Align-self...
I would rather use "align-self" and "justify-self" instead of margin for placing items in the container
thank you, darling, this is helpful, I currently building a responsive website using flexbox and grid template
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
please replace left and right by start and end to not break your layout in rtl
thanks, helpful for header when logo stand on left and nav links all on the right
that's exactly what i need right now
instead of using marging use
align-content:space-around;
I remember life before flexbox. I feel like the old people who talk about how they had to walk to school lol
In my day we had to float: left; and clearfix through 10 feet of snow. Uphill. Both ways.
Creating navbar a little less wordy now.
The real pain comes when having to do responsive design with the wrapping of flexbox elements with dynamic widths
Yh it pretty much makes it all a pain in the ass
nice sir i really like your of your toturials
there are many things that im learning from your toturials 💖💖💖 thanks.
me acabas de salvar de un dolor de cabeza que tengo con unas alineaciones en algo que estoy desarrollando, gracias :D
Awesome thx bro
Wow,perfect teacher
That was amazingg!!
I had to wrap stuff into redundant divs for this use case.
I know better now.
I need a video on the longest way to center a div, more code == more better
Are you stupid?
This is pretty cool,I always had to use justify between 🤣
CSS is still the vain of my existence from time to time thank god for JSX and “JSS” I hated having to write individual css or scss files for my components or use cases
Thanks it’s for this realy good trick
Flex box really flexible
flex:1 laughing in corner
My savior
I learned this from Kevin, but nice trick!
cool, cool. thanks, Cyle!
You are wonderful 👏
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
I love flex-box, but I can I can never remember anything and basically trial and error my way around till it looks right.
Oh my god i can finally center a div😮
All i feel is power
I feel proud because I knew it for a long time
I would have made an empty element with flex grow on it but I guess that’s fine
thts wht i exactly needed
try to do the same but with multiple lines 😉
It's actually possible 😅👍
Wow that's great. I usually justify content center then use ID for individual elements with margins %'s. But this is much better with way less code
Boss I have advanced flexbox knowledge.
Boss: that's nice.
My content: *commits tax fraud *
Me: your honour, Flex box !
I use this a lot of times
Great work. Audio not clear.
The real problem with websites is all browsers don't act the same way.
I will add on flex item : the gap of 2 and have it as margin
Great for building navbars.
Yeah flex is pretty sweet, though does feel like I sometimes overuse it.
As long as it gets the job done
I'm sorry I know this is not a JavaScript based video but can u do a tutorial on JavaScript basics and a crash course showing each of the JavaScript basics on how they're applied
I learned a lot from ur videos this is a request I really need
He already did I guess ?
He has plenty of that check the channel
This has nothing to do with flexbox though
Goddamn i always used to wrap them in different boxes
Helpline 📲📩⬆️
Questions can come in⬆️
thats actually much better
What about breaking it into two container within flex box ? I think that’s what I’ve been doing since forever.
animated Box With CSS
th-cam.com/video/gBmx3RmThDE/w-d-xo.html