16. Controlling the vertical position of flex items - Responsive CSS Tutorial

Key Takeaways

in the last one we saw how we can control our columns on the horizontal we can space things out on the horizontal axis which is our main axis in this video we're gonna be seeing the align items property which works with Flex box just like justified content does and what this does is it allows us to control our items on the vertical axis instead of the horizontal so when we do our display flex we get all those different block level elements which turn into columns and stack next to each other when they become Flex items and one of the things they do when this happens is they actually stretch the whole height of the div and the height of the div is generally controlled by the item which has the biggest height so this a lot of time is actually a good thing it's something that we wanted in CSS forever because it used to be almost impossible to match heights of different items and now we can actually do it really easily but it's not something we always want to do sometimes we want things to align to the top and so we can use align items and we use the value of flex start to be able to do it where they'll all shrink and be just dependent on the height of whatever is inside of them and this is one of the ones you'll probably use the most often the next one you can do is Center which is also really really handy and vertically centering in CSS used to be an absolute nightmare and a lot of the time you want to be able to vertically Center stuff you can do it with Flex box which is super nice and if you want to align things all on the bottom you can do it with Flex end there's also the stretch which is the default and just if you ever need to reset and go back to the way things were if to overwrite something there's also another one called baseline that I'm not really gonna get into too much now it's the one that people don't use very often it deals with the text inside the elements and it's a little bit weird but there is the baseline one as well so to take a look at an actual layout what I've done is I've taken the layout that we were working on before and I've eliminated a bunch of the content just so we can focus on these three columns here I put a blue border on our columns container just so we can see it and I've put the pink border or the magenta border here on our columns all of these borders are just to help illustrate what's happening with all of it so as I mentioned when we do a display flex everything turns into a column and by default they stretch to match the height of their parent and the height of the parent in this case if you remember any block-level element by default will be a height of 0 but grow to fit the content that's inside of them this is the one that has the biggest height on it so our parent is growing to fit this middle container and that means these other ones are stretching to match it's height sometimes that's a good thing but it's kind of weird that this brown box on the right side is stretching to fit the height there I find that really really awkward so I'm gonna do is I'm actually gonna put this on the side so we can take a look at it while we're working and really see things live while I'm editing some code here um so let's come down on to where we have display flex and we have our justified content so the gun that's for the main axis or generally the horizontal we can switch that and we're gonna see that a little bit later on but for now justified content is on the horizontal axis and then aligned items will be dealing with the vertical axis or you're gonna start hearing me say cross access a lot more so up and down at the current moment so what I can do on this is I can do a flex start and when I do that you'll see here everything is shrunk to fit the content of what's inside of it and this is sort of the behavior that you might expect to be the default and it's the one that you as I said you'll probably if you want to overwrite the default this is the one you'll probably use the most often if I turn off the border which is right here you won't really see you won't actually see a difference on those first two columns when I do it it's just that brown column that's jumping to really long or shrinking down in reality this one is doing it too it's just because there's no background and there's no border on it it doesn't actually make a big difference so if you don't have any background colors or any borders you probably won't have to worry about this too much but as soon as you have something that has a border has a background color has a shadow on it which we'll be exploring a bit later all of those things will affect what's going on so that's where you might want to bring in your flex start to make sure everything is shrinking down to where you want it to be we also saw that we have a flex end so that's gonna push everything to sit along the bottom it might seem a little bit weird it is but you might be wondering when I would use it not terribly often probably but it is something that could come up and then we have our Center which you'll use more often than you might think and it can be really really handy as I also mentioned there is the baseline you'll notice that the way the baseline one works is it's taking this first line of text and it's making this is a bigger font size than this one it's making sure all the text on that first line is actually sitting on like there's this imaginary line that goes the whole way across the first line of text in every box so if we actually came and just for one changed the h2 font size here let's just double it up to three it's pushed my brown box further down so everything is matching this the first line this lorem ipsum right at the top the bottom of those letters is lined up with the bottom of this the base line is dealing with the bottom of the first line of the text you probably won't use it very often but I figure I'll bring it up because you might run into it at one point or another so that is how the align items works let's go back to flex start now the one thing that does drive me a little nuts is it's flex dart flex end and of course Center and up flex Center I don't know how they decided that or why they decided it but that's what it is and we do have to live with it