CSS Flexbox Explained — Align Items
Last week I covered the power of flexbox in terms of distributing items horizontally within a container. If you missed that you can check it out here. I went over the container/item relationship in flexbox and covered flex-direction so if you don’t know what that is please check out the blog.
Align Items
This time I’m going to go over the ways flexbox handles the vertical distribution of items and space within a container. The way that’s done with flexbox is align-items, it’s justify-content but on the perpendicular axis.
Flex-start
Items start at the beginning and proceed along the flex-direction. The main difference between flex-start and stretch is that the height of the item doesn’t automatically fill the container like it would if you chose to use stretch.
Flex-end
You probably guessed it, this is essentially the opposite of flex-start. Whatever the flex-direction is the items will organize themselves starting at the end. To clarify, if the flex-direction goes from top to bottom, which is the normally the direction it goes, items will start at the bottom and move to the top when using flex-end. It can get really confusing if you’re using flex-direction: column-reverse; and align-items: flex-end; see if you can guess what effect that would have. It would have the same effect as flex-direction: column; and align-items: flex-start; which is to say the content would start at the top and progress to the bottom.
Stretch
Stretch essentially fills the container. This is the default setting, if nothing is declared the items will be distributed in this way. Max and min width still determine the extent to which the content can stretch, it can’t exceed the max and starts at the min.
Center
Always a fan favorite, this will center the item or items vertically within the container. It doesn’t matter if the items are different sizes, center will put the center of the item in the center of the container. This can end up leaving weird peaks and valleys of space, so be sure to be mindful of that. Center does what it does well but it isn’t always the right answer in terms of aesthetic design. Don’t center everything.
Baseline
A baseline in typography is the line that most of the letters ‘sit’ on. By most I mean all letters except for ‘q’, ‘y’, ‘p’, ‘g’, and ‘j’, basically any letter with a ‘descender’. The effect this has in align-items is setting all items baseline on the same horizontal line so that the letters are resting on the same line. Take a look at the example above, the red line shows where the baseline of all the text is. Notice that no matter the size of the item or the font size the baseline for each item is the same. It should also be noted that I only created that red line to illustrate the point of where the base line is, an actual line will not appear.
Hopefully this gave a pretty good explanation of align-items and the effects and use cases for it. With this knowledge and what you learned from my last blog you should be in pretty good shape when it comes to formatting your web application. If you want some more practice you should checkout flexboxfroggy.com it’s a great way to apply some of the things you’ve learned and see how they effect things in real time. If you have any questions feel free to hit me up on LinkedIn.
