Two flexbox & grid behaviors most people don't know about
Vložit
- čas přidán 14. 06. 2024
- When we use flex and grid, there are a lot of things that we know are going to happen, like getting columns and whatnot, but a lot of people don't realize how it affects collapsing margins, and also what happens with things that aren't wrapped in elements as well!
🔗 Links
✅ Deeper look at how flex works: • Flexbox is more compli...
✅ More on collapsing margins: • Collapsing margins - w...
✅ Visbug for Chrome: chrome.google.com/webstore/de...
✅ Visbug for Firefox: addons.mozilla.org/en-CA/fire...
⌚ Timestamps
00:00 - Introduction
01:33 - Margins
10:37 - flex and grid items are not block or inline
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
More videos on flex and grid!!!
Wow, once again, amazing content, explained in the best possible way! And that Visbug thingy seems super cool. Thanks Kevin!
Amazing! I really hope that you put all these Flex or Grid videos in a playlist so if someone wanted to watch them all in a row.
I had no idea that margins spilled out of the container, that's crazy!
It can be *really* annoying, even when you know why it's happening 😂
Man, Kevin you are simply awesome! Thank you for explaining things so clearly
I didn't realize I can use 'gap' in flex. Great video
Love your videos Kevin, I learn on every single one! you've helped me turn intermediate from a noobie Web Developer, thanks for all this free knowledge, Like all your vids I watch and Subscribed !
Excellent. Have not seen "gap" documented in flexbox docs elsewhere.
An in-depth review of flex box vs. grid would be nice.
Similarities vs differences.
If there are reasons to favor one over the other.
weeb, you shouldn't have favor one on top another. They are complimentary so using them both gives you a huge huge amount of power and flexibility :)
@@petarkolev6928 True.
Basically use flex for navs, and grid for everything else
Wow! Simple, yet so useful! Thank you Kevin!!
Masterful explanation, awesome tip about the add-on visual debugger!
Amazing content Kevin. Even when working with CSS for more then 10 years I still learn something new. Flex and Grid are so powerfull and amazing, what a time to be a front-end developer.
One question though; how do you keep your CSS maintainable when the site that you're working with keeps expanding and adding new layouts / content? That's the hardest part for me as it can get messy pretty quick. Would be great if you could do a video about that.
It depends on what tech stack are you using. In these days, if you're using React, the CSS-in-JS is very popular, that way you can handle the css in the component itself, but If you're building sites without frameworks or libraries, I guess you can use a CSS methodology like BEM or similar. That way you can freely move your HTML.
you are awesome man.. best css tutor in the universe.. you go so deep.. really learnt and learning a lot from your video.
Hum! Really interesting! I dont recall EVER hearing of or reading about COLLAPSING margins before. I just did NOT know that it could happen. So it's no wonder I sometimes (often) scratched my head at element's behavior! Thanks for clarifying this for all those who folow you!
Keep up the good work kevin, you’re great.
come with frustration, leave with satisfaction, it is always like that with Kevin, awesome content with wonder illustration.
great explanation. wanted to learn more about layouts from your channel
Very interesting, Kevin! Thanks!
Great Video!
Poor choice of words 10:51 haha
......
Amazing content as usual Kevin 👏
Btw. I'm back again with another query xD Thanks for helping me out all the time when commented on your videos.
My issue is related with Flex & grid & unfortunately this video doesn't throw light on it.
So, I've a section with display of flex on it & it has two children. One oh the children is an ul with display of grid. Now when I try to take advantage of grid template column property to create equal responsive cards using the auto-fit & minmax properties. It doesn't work.
My grid children ends up becoming a single column with a long row going down.
I set a max-width on the ul to fix this issue because I realised that the ul (which is a flex child) won't have enough space. That sort fixed my issue, however, my grid isn't responsive. It doesn't break down into multiple rows, it just stays fixed with the max-width & causes overflow.
I sorta fixed by taking of the flex from section & it worked. However, I can't understand why is it behaving the way it was.
I'm using a flex utility class
.flex {
display: flex;
align-items: (var(--align-flex), center);
gap: (var(--gap), 1rem);
}
I know. This might be a too specific of an issue but I've tried everything I learned so far about grids & flex but I just can't seem to fix it And yes, CSS is frustrating me rn.
Also, my section is a flex container. I've another utility class of container with max-width & margin 0 auto just to center it. Does this have to do anything with it? I tried turning it off, but this didn't fix my issue either
Thank you!!
This video is very helpful for us
I have learnt a lot from this video.....
Excellent video, thanks
Wow, never saw that before today! Thanks! And Visbug extension is sooooo gooood !!! Do you have other so great secret tools? I am interested in 🤩🔥
Always thank you Kevin
Kevin. I do have a question. Is there any reason why using a flexbox with a table element wouldn't take the full width of the element?
Thanks for the clarifications, always have issues when I use display:flex with the boxes I put in a grid.
So.... I'm watching this video and get a 47-minute commercial??? (This particular one was the keynote for Chrome Dev summit.... but 47 minutes for an automatic ad when the vid is not even 15 minutes?) WTH?? I know you don't have control over which ads are shown but seriously - WTH? 😂 Okay, done ranting, wonder if I'll watch it all the way. (Spoiler alert - I didn't)
Oh also, good video as always, very informative!
collapsing margins coming back to bite us yet again xD Even more reasons to truly understand the theory of formatting contexts.
Nice way to explain the intricacies of CSS and flexbox, but there are also best practices that are better options, IMO. You could and probably should have just reset it to display block instead of flex. The added benefits of a flexbox don't seem to be required there. Also, I typically prefer to never give elements a top margin, and only work with bottom margins. That way you prevent collapsing margin magic and confusion, and you'll never have to worry about elements pushing themselves down, only elements below them. In this case your container div could have a padding-top of 2rem and each block could have a margin-bottom of 2rem and you'd be done.
And to expand on that, yes, gap (or grid-gap) is even better than margins :)
I prefer having padding on all the sides, rather than having to leave the bottom padding off and relying on the margin of an element. I find it much easier (plus it can collapse out the bottom as well, depending on the situation).
I do think working with them only on the top or bottom is the best way to go, and being consistent with it :)
@@KevinPowell Im currently taking your course on Scrimba.The way you set it up for us to learn is considerate and effective as we get to learn immediately.I feel like a pro.I wish you taught jQuery UI,I'd purchase.I'll keep you updated on the website I'm building because you help me be proud of my work,hope you don't mind and thank you for your sacrafice.God bless you abundantly.
I'm happy to know I knew what was the catch with the question brought xD And guess with whom I learned it? Yep, with you. Thanks for all your hard work 😁
By the way Kevin, I've never heard of margin-block 🤔 have you ever made a video about it and its difference in comparison do margin? If not, I think it could be a nice video!
They are called "logical properties", the other one is "-inline". Kevin has got a video on this: /watch?v=kzvmaVik4mA
@@wolframzell6162 Thanks Wolfram!
Thank you for this wonderful video. I noticed that gap property won't work on iOs
Observations is keen and Kevins vision is sharper than X-ray
Hey kevin, what resources can you recommend on css architecture or maintaining a large css code base without a design system.
Thanks kevin!!
Dear Kevin, thank you for this awesome video, it helps me a lot!! BTW, can I ask you what is the tool name that are you using in th chrome in the video 4:27~ Hope that you can share it to me~ thanks!! I'll keep following your channel~ Nice Videos
i watched the video again today (great video - as always) but unfortunately i have to tell you that flex & gap still doesn't work with safari - only grid & gap create the desired effect in safari. with flex there is no gap in safari. i found out 3 days ago when i tested my homepage for the first time on a friend's macbook (i'm an ubuntu user) and the layout was completely ruined! i changed every flex with gap to grid and now it works just fine.
thank you
Thanks!
Thank you so much!
Not collapsing margins: I personaly love that flex and grid does not allow collapsing of element margins. I was never a fan of it, actually I hated it so much that instead of margin I started using unnecesery nested elements and paddings just to achieve the same thing which flex and grid does by default; and I love it!
I totally agree it's the better behavior, just annoying it can lead to inconsistencies. Be kind of nice to have something like box-sizing for margin-collapse or something, where we could change the default if we wanted to!
can somebody explain why he is saying when you do display: flex, they turn into columns by default when the default is actually row? I'm confused
Kevin, why did you say in 11:15 that display:none takes elements out of the flow? Probably I don't know how display:none actually works :P
Thanks kevin
Kevin, quick question. How do u put your "selection" immediately in a comment? Do u use a specific hotkey for that?
More videos on flex and grid layouts for website layouts
excatly what i gone thought the troubles many time , i used grid inside grid nested without sub grid super complex grid nesting
I ran into something recently using images in grid that completely baffled me. Not really pertaining to this video but on weird interactions and I'm still not entirely sure the best way to solve it. If I have a 1fr grid area, and the other areas are max-content, my image wouldn't take up the remaining space but instead pushed all my other content outside of the parent. I ended up having to change it to a div and setting it as a background image, but I highly doubt that's the best way to solve it, and I'm still confused why it happened.
What sources do you use to know when new features are supported in all browsers? Are you subscribed to someone or flow someone who blogs?
Gap is the best property to space content in flex/grid container
What is the shortcut for comments that you use?
Can you make a video on svg (when used in Web it often overflow and I can't a way to control that)
Whenever I design a large size svg....I think it gives it self a padding causing overflow-x and y to show up which I don't want
really you make life easier, big thanks
Need to close that tag out properly mate 😉🤣
@@IcarusGX3 😅😂
One good thing that i liked about grid is the option of gap that has while in flexbox i think that gap works only in firefox(i am not sure about this)
Gap is supported in all modern browsers now 🙂
@@KevinPowell Cool.
Hello! I am a student in 12th grade and I'm planning on staying graphic design. I find your videos very helpful so I wanted to thank you for all the effort you put into them😊
Thanks! Keep up the hard work and good luck with your studies 🙂
This year I used the display: grid and gap properties, but I had to replace it because gap property didn't work on Safari (Mobile and desktop, last versions). So I have to use margins, instead. Does this information proceed? has this ever happened to anyone?
10:50 You're doing what now? 😳
Love u kevin♥️🥰
Position sticky does not work on flex items. Can you please make video on this topic?
collapsing margin seems annoying, surprised i havent found out about this yet
If you do need to space items using margin, just use :not(:last-child) with a margin-bottom, or right, or whatever you need. Simple.
I'm pretty mad that GAP isn't supported in react-native :(
this makes it even worse :( :( :(
I guess I was soo tired of these odd quirks that nowadays I start with deciding if it needs to flex row or column or be a grid before even thinking of the rest.
Flex is so powerful that I use it in almost every component. Makes sense since the component now is flexing it's muscles. 💪💪
"I'm here and this is my space you measly block element get outa here." 🤣🤣🤣
One thing I really don't like is the missing justify-self in a flex item, I cannot use last-child to put the last flex item in flex-end while the other are in the start, for example, I need to use auto margin in this case, this is annoying
You should be able to with align self, just not with justify. And yeah, auto margins is the way to go there 🙂
One problem with using gap on flex containers is that on iOS devices it doesn't work. Even in Safari it's fuzzy/unreliable sadly. I even encountered problems with gap on iOS and in Safari for grid containers. Weird.
Without KP i would be so lost on grid! Even flexbox that i thiught i had a good handle on makes more semse!
Dangerous Idea: Use ' ' outside the flow to change the layout using js. Add multiples to really change the flow. Advanced users only.
What do you do
Your work
Teach people about CSS 😊
IMO Discord sucks! I must have set up an account but I can't sign up for your discord because it is saying the email address is already taken - and there are NO links for forgot password, etc. So I would have to signup with an alternate email or not use it -
WTF?
In other words, display-flex it's like a new box-sizing: border-box , right? hehe
css need a way to detect a flex-wrap
its sad that we won't be able to know this video had 0 dislikes in the near future
No cards be poppin Kevin
Links are in the description, I'll check what's wrong with the cards :)
(EDIT: cards are set up. I don't think they appear if you're watching in a browser on mobile, so maybe that's it?)
So basically, collapsing margin only happens when we have simple elements, without flex and grid
Backend developer here.... hmm, to me flexbox and grid behavior actually makes perfect sense. The old school css is actually inconsistent and weird as fu.k. No wonder people were loosing their minds. I'd never understand why flexbox and grid came so late into the css and web development.
Because of browsesr update policy. On backend you can upgrade versions in your env, check your code, update all dependencies and fix bugs, than just roll it out to prod. That's what was not possible to be done with browsers, as when you update your browser and add new features - you have 100% outdated browsers (environments) and your users are slowly (5+ years for some IE versions) upgrading. But you still need to support all those outdated users
@@JustSomeAwe I understand that updates takes time to bake in and you still need backward compatibility. I just wonder why Flexbox and Grid or something similar didn't arrive much earlier.
Gap doesn't work well in IE, so maybe set up an IE only rule and use margins in there. Or consider using gap with @supports.
No need to support IE anymore. Even microsoft has dropped support of it within it's own online products, as have all the big social networks, netflix, youtube, and much more. Unless you work in a very specific situation where you know you have users on it, I really wouldn't worry about it at this point.
@@KevinPowell Thanks for taking the time to reply. Sadly where I work its still part of the policy to support older browsers (due to machines in office blocks and call centre's etc). So I am stuck with IE!
I was the 666th like.
Peace 🤘
Kevin im falling in love with you.
Cmon Mr (or Ms) CSS, we've had enough of this collapsing margins. Send them to trash in future specs.
10:50 "And that actually means if I come on one of these children..."
_"I'm Chris Hansen and I'd like to ask you to take a seat"_
Wath this > * +* { ... } ?? ,i'm no undestend
I like your channel, but you might want to script this out first. It isn't clear where you're going with things.
90% of the stupid way html and css fails, it is almost always Edge or Safari.
Edge is built on Chromium now, so if Chrome supports it, so does Edge 🙂. But in this case, all of the things i talked about are consistent is all browsers.
thank you