15. Spacing out the columns - Responsive CSS Tutorial

all right so everything in our layout is starting to come together but the problem now is our columns are stuck together so as I mentioned in the last video we can fix this by adding some margin to them but then you have the problem how much margin do you add and then stuff doesn't really fit as well so luckily flexbox has a way to make it a little bit easier and it's something called justified content and this is a new property that we're going to be using we've already seen when we have flexbox when we do display flex this is what's happening right the parent gets display flex and we get columns now we can add a new ping called justified content and there's a few different properties on justified content but one of them is called space between and what that's going to do is it's going to take the extra space that we had that's going to put it between all the elements if we look here as an example we had all this extra space that was left over on the left side so when we add this justified content space between it's taking that extra space and it's putting it in between the columns instead of leaving it over on the right side so what I'm going to do is first I'm going to exaggerate that a lot where I'm gonna change all these numbers but let's make them like pretty small I'm gonna say it's 10 20 and 30% and as you can see then we get all this leftover space and it's just floating over here on the side of our page we get all this empty space like that so what I can do is on where I have display flex so it's always on the parent in the same place that you declared display flex we can then come down and you are just defy the e 5 content so it's just like that two words but they're hyphenated all properties they're always and just like we've started seeing max width is max width with a hyphen in it so justify content is the same and then it will be space between there are two other values you can use we're gonna look at those in a second but this is the one we're gonna be focusing on for now which is space between so now if we go and look at our design we can see that we have this giant space between them because it's taken all that space that was left over on the right side and it's evenly distributed it between our columns now which is awesome now in this exact situation it isn't the best but it is pretty cool now the other two options you do have between other than space between your space around so what space around is going to do is it's also going to put the space on the left and the right space between make sure that the item that's part of this to the left and the item that's farthest to the right stay all the way on the sides whereas space around will put space around each item now the thing that's a little bit weird is the way it evenly distributes that space it's taking the space and it's evenly putting some on the right side of our element here and on the left side and then it's putting some on the right side of this one and on the left side and the right and the left so what that does is it does create this thing where the right space and the left space are always smaller than the spaces in between because it's doubled since this one you're getting equal spacing on each side of each element so these get bigger spaces than on the two ends so more recently they've come up with one that to fix that problem and that one is spaced evenly and what spaced evenly does is it tries to make it visually look like it's balanced this despite width despite anything else it will make all the spaces be even instead of doing that weird space around things so spacing Lee is a really nice solution but for now we're gonna stick with space between and it's probably the one that you're going to be using the most often so we can do now is we can fix the actual widths we had on here now originally we had this as 25 50 and 75 but the problem with that is that doesn't leave any space for our space between to redistribute because when we add all of those up we're always hitting a hundred percent 25 and 25 is 50 plus 50 is 100 and if we come and look down at the bottom we have 75 plus 25 s we have a hundred percent space there as well and so for simplicity now I'm just going to reduce a lot we're make 5% off each one of these so this will become 45 and this one will become 70 so we take 5% off on all of them it's going to leave us a whole bunch of extra space that this space between can now redistribute in between our different items so if we go and take a look we have our nice big gaps in between all of them now everything should be lining up pretty well and it is working out nicely when we go on bigger or smaller screens now it's not a hundred percent perfect cuz our padding is making these columns a little bit bigger than what they were but for the purposes of what we're up to right now I do think it is good enough and it is working really well so I am really happy with it