Two flexbox & grid behaviors most people don't know about

when we use flex or grid there are certain things that happen if you do display flex you get columns right but there's actually a few other things that happen that might be catching you off guard there's behaviors that change away from the defaults that a lot of people aren't aware of and in this video i want to look at what a few of those are hello my friend and friends and welcome back to the channel if you're new here my name is kevin and here at my channel i hope you fall in love with css and if not fall in love with it at least be a little bit less frustrated by it and one of those things with css that sometimes catches people off guard is when things don't behave the way they think that they should be behaving and don't understand why certain things are changing when they're not expecting them to change so that's why i want to look at these differences that can come up with flex and grid in this video these are little things that can catch you off guard and i've looked in a few of them at the solutions that you can use to overcome them and just better ways to work that will be a little bit easier for you in the long run and once you understand this and you know that this is the behavior it becomes very easy to work with them and you can start working in a much more consistent way as well as one little caveat some people might go well why is the behavior even different in the first place and i don't actually have an exact answer for that but these behaviors are different we need to know that they are so we can work around them and work with it and they actually work in a way that's a little bit more logical and a little bit easier to understand so in a way it's easier it's just kind of weird that it changes all of a sudden from what we had if you're wondering what i'm talking about me a lot easier when we look at the code so let's go and dive in and do just that all right so here we are in vs code and i'm going to push all this down just so we can work up here and when i save of course it formats it and pushes everything back up um so what i want to look at is we've created these three cards here and there's nothing too fancy happening with them but there's some annoying behavior so let's just say let's go look here really fast and i have um this flex and even actually we don't need the flex class let's just do everything on this even columns and so to do that what i'm going to do let's create that class even columns and we can say display of flex which will make them into columns and they go next to one another but um the first thing i'm going to do is what's you know i like working mobile first so it's small screen sizes let's say that these actually have a flex direction or the parent has a flex direction of column so that means the children become rows and do you notice something a little different right now than what i originally had so when i set this up i said you know what i wanted it to be set up like this with this this distance between these cards and and that was exactly what i wanted but then when i come and i do this an interesting thing happens where that space actually doubles and there's an interesting reason for this because everybody knows you know when you do your display flex or uh you know there you go you you get columns and that's the behavior that people know and love and that's one of the nice things with flex is it it goes and does that and just so you know this won't always make even columns and just in case you want to know more about that i do have a card popping up or a link in the description down below um but what we often do is something like this and then we have like a media query right so at media or you can come in with the holy albatross even um and so here i'll do a min width of i'm just going to do 45 m um just so we have a number there basically and my even columns can then get my uh flex direction of row so then if i open my dev tools uh with responsive mode on when we hit that break point which i guess we should have made a little bit smaller let's try 35. um oh i mean 55 i should say there we go that makes more sense so when we get to the big screens we have our columns and we get to here but we get the giant spacing so does that mean i should actually just turn off flex completely like no it's not what you should probably be doing um and i want to explore why this is actually happening so for now what i'm actually going to do is turn this off and i'm actually going to just comment that this display flex for a second and we're going to turn it on and off as we go through this um so i do have an extension installed here called visbug which adam argyle created and it has tons of really cool stuff in here you can do a whole bunch of simulations and sort of visually debug your css the link to it is in the description if you want to add it and i'm going to choose this guy right here which is my margins one and what that means is i can click on something and see the margins of it so you know that's kind of cool but you can also so if i click on this i can see the margin on the top and the bottom there and we have 32 and 32. but this one also has 32 and 32 and those are collapsing margins those margins have collapsed into one another huh and just why they're 32 is down here on my example i have a margin block of two rem so block is your margin top and your margin bottom it's a logical property and so i have this two ram top and bottom so it adds up to 32 pixels on both of them and the margins between these are collapsing so if i push shift and i click on both you can actually see that it fills it in like doubly because those margins have collapsed into one another and then what happens when these become flex items rather than just regular block level containers is those no longer collapse so let's go take a look and i will refresh this bug here and now when i look at that look at that they're not collapsing margins anymore and this is something that stands out a little bit more when you do a display of grid on something so we'll leave my even columns now but we're going to switch this let's just turn off my viz bug and we'll switch this to grid because this happens all the time where you don't have anything on it you have them like that you know you have your items and then as soon as you do a display of grid the spacing on everything doubles because the margins are no longer collapsing you see this if you have something that has paragraphs that becomes a grid parent those paragraphs become grid items you always see where all of a sudden your paragraphs become double-spaced um and if you if you'd like to know more about collapsing margins i've gone deeper into how they work um so if you'd like a more in-depth video where i just explore margins in all their glory or just specifically on uh collapsing margins i've linked that one down below and once again there should be a card popping up we got a lot of cards on this video um but yeah so all right the flex direction won't do anything but yeah now we have these non-collapsing margins right there so it spaces it out twice as much and my recommendation for both situations would be not if you have a grid or flex parent would be not to space things out at all with margins and maybe why why would you want to do that kevin that seems a little strange um so let's go find that example one again right here and i'm going to put my margin we'll just turn it off which should make it zero because these are divs divs by default don't have a margin on them and there we go they shrink away and they're all glued together and the reason i would recommend not dealing not worrying about that is because you can then come in and say gap and say gap one m two m or in this case it was two so let's go with we had two ram so i can stick with two but now i know my gap is actually two and i'm not dividing my old margin by one i'm just setting gap of two and that means if i do change the direction so we can do a grid auto flow of column instead and now i know the gap this way is two or if we did it before like we had with our flex so let's just delete all of this we can say our display is flex and then we'll come in with we'll turn this back on and we'll turn this back on so now i get this behavior again where it's stacking and then at the large screens it becomes columns and right now it's all glued together and that's perfect because this means i can be nice and consistent because what i can do is here say gap is to rem and now the nice thing with gap is when the flex direction or the grid auto flow or however you're doing it if you have a grid that's doing multiple rows and columns in all of these situations the gap vertically here is two and when it goes this way and they actually go next to one another now my gap between them that way is becoming two and this is super super cool and handy and i'm just going to turn off this bug because i don't actually need it now so let's turn you off um and yeah so it can become really really handy in getting consistency and all of that and that's one of the big things that a lot of people don't seem to realize when they use flexor grid is that the margins no longer collapse and there's another stage to this collapsing margins as well and so let's turn off uh what am i let's let we'll stay right here this is my h2 i'm going to say is dot um the the headings have a padding on them right now so let's take that um padding off and you see it less if you have backgrounds but let's turn off my padding for a second and even though my example has the padding off notice how we have a space on top here and that space there is coming because of this being a display flex so the parent is a display flex the items inside become flex items if the parent wasn't a display flex or a display grid the margin of the child collapses with the margin of the parent and it actually is creating gaps between them even though this margin is coming from the h2 here or actually in this case it's probably all the h2 but the paragraphs at the bottom will be bleeding out the bottom too and just to show you that's what's happening let's open up that viz bug that i said we don't need anymore select my margins and you can see that that margin is coming from here or this margin it's actually coming from my h2 or my paragraph so those margins are spilling out of their parent because the parent itself if we can if we can get it can i get it i don't think i can click on it the parent itself doesn't have a margin on it it's spilling out but when we change something to be a flex container or a grid container the margins this what it's effectively doing is creating a new formatting context and that means that the margins are no longer collapsing and because we're creating a new formatting context it means that the margins of what's inside won't spill outside of it and just really quickly collapsing margins only happen on the top and the bottom not on the left and the right um so yeah just to throw that out there as a little extra so that's one of those really important things that sometimes causes weird layout shifts when you're not expecting them to is things margins behave differently when we have a block element or when we have flex and grid items and this is also another thing that's very different um or interesting i guess we should say um when we have a we'll talk about flex whose flexing grid formatting contexts are very very similar um and what i mean by a flex formatting context when we do a display of flex the children are becoming flex items and that actually means if i come on one of these children so let's say dot even columns let's select all of them we'll go star and let's do a display of inline nothing nothing will change it's literally exactly the same or if i made that block nothing will change and that's because once and the parent is a display flex these children it doesn't really matter i mean if you throw a display none on here it matters because it takes them out of the flow but the display inline a display block a display inline block they don't change anything they don't they're not having an impact on them because they're flex items and they're behaving like flex items so and one of those things is the way the collapsing margins works with your flex items and just their overall behaviors and all of that the same with your grid items so if you ever are trying to get something to behave in a certain way and you're trying to change the display of it when it's a flex or grid item and you're getting frustrated this is why you can't make that change it's that that sort of goes out the window a little bit with those and another thing that's important here is that even if something doesn't have a div around it so let's just say i come here and i just put some text here is some text this actually becomes a flex item even though there's no element there so if i hit save that's a new column and it's behaving like a column that gap is being applied to it anything that would be you know i can't select it i have no way like this like if we said background background red important it's not going to select it because it's not actually an element that's there to be selected it's just some a string of text but it will be treated like a flex item as far as the layout goes so it's going to get its own column and do its own flexi things even though it's not an element this is hopefully something you don't run into very often but it is important to know and once again this is the same for grid where something will become let's just throw this over to grid um just so you can see like the gap is the gap still applying there it's still doing its grid things and if we let's do the uh grid grid auto flow of column just so we can see and it's going to get thrown on there or maybe we could even do grid auto row of 100 pixels and rows not row and 100 is way too small let's do 1000. so it's super huge so that has a lot of space well guess what even though this is just a string of text it has that thousand pixels uh so it's not something i can select i wouldn't try and take advantage of this it's just so if ever you do have something like that so you understand what's actually going on with it and some important differences with when we have something that is display grid or display flex and the changes that it could make to what you're working on there are a few other implications as well about when we're doing all of this but i think most people know what those ones are and they work with those all the time so i'm this video is more about the ones that aren't covered too often and if you found this interesting but you were wondering why i would choose a grid over flex just to make even columns that video is right here for your viewing pleasure and with that a really big thank you to stuart randy and johnny for being my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make you record the internet just a little bit more awesome

Channel: Kevin Powell

Views: 49,364

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial

Id: s3wHkfMz8oE

Length: 14min 2sec (842 seconds)

Published: Tue Nov 23 2021