Alec WertheimerThis is a quick overview of basics and fundamentals. I'm assuming that you know the basics of CSS and what FlexBox is and why you want to use it. I’m only going over the basic properties and values, I have narrowed it down to the handful that I use most on a daily basis. This should however be enough for you to accomplish the majority of what you’re trying to accomplish with FlexBox.
There is more to FlexBox than what I’m going to cover in this post. If you’re not sure what FlexBox is or want to take a deeper dive into all of the properties that are available to you, check out MDN, they have a great overview of the flex module.
Main Pieces
There are two main pieces to an element that is using flexbox. The flex container or the parent, and the flex items, or the children inside the flex container. That’s all, seem’s simple right? Honestly it is, that’s the beauty of it.
The Container and Flex Model
So to be able to use flexbox the first thing we need to do is create a “flex container” to do this we’ll create a div and give it the styling “display: flex;”. This converts our default div into a flex container, and enables the flex model inside. You can turn almost any HTML element into a flex container, it doesn’t have to be a div.
<div class="flexContainer"></div>
.flexContainer:{
display: flex;
}
So what’s actually happened to the div now that we’ve converted it to a flex container?
Well first of all, the element itself is converted into a block level element. So as far as how it interacts with the rest of the elements on the page, it's as if you’ve enabled “display: block”.
That's pretty standard behavior, the more important thing is that once the element is defined as a flex container, two axes are enabled inside the container itself. The Main Axis, and the Cross Axis. These axes are what is used to actually arrange your child elements inside of the flex container.
The main axis is the axis that determines which direction the flex items will be displayed. Hence the name MAIN axis.
The cross axis runs perpendicular to the main axis, hence the name CROSS axis.
You can choose which direction you want the main axis to be by using “flex-direction”. There are two main flex-directions, Row and Column.
If you use flex-direction: row; the main axis will run horizontally and the cross axis will run vertically inside the container. Since the main axis is horizontal this will cause the flex items to be aligned horizontally inside the container. Lets take a look at a flex container with out items for now.
In contrast flex-direction: column; will cause the main axis to change to run vertically, and of course this will cause the cross axis switch to be horizontal. Since the main axis is now vertical, and the items always run along the main axis, they will now be aligned vertically. Again this is without having any child items yet.
FYI the default flex-direction is row.
These two axes are the fundemental structure of how flexbox works. Lets move on and actually add some items.
Flex Items, Selectors and Properties.
Ok so we know how to create a flex container and how to set the direction of the main axis. Now the question is how can we manipulate the items in the container and get them to behave how we want. They answer like most things in web dev is..….there isn't just one way.
With flexbox you can set positioning values at the container level which will adjust all of the elements in the container. Or in some cases you can set positioning values on individual to change their position.
We’re going to focus mostly on the container level values, I’ll mention some of the item values towards the end. But I’m not going to do a deep dive on those in this post.
Justify and Align (Container level)
Let’s start off simple with Justify and Align. Justify positions items along the main-axis the actual property is justify-content, and Align positions items along the cross-axis with the property being align-items.
There are many values you can set to these properties to achieve certain results but we’re only going to focus on a handful.
The properties and values that you use to position elements on the main and cross axis change depending on the flex-direction that you are using. We’ll start with *flex-direction: row; since that is the default.
Justify-content
In my experience these 6 values for justify-content is all you will need the majority of the time when working with flexbox.
justify-content: start;
Start will position the items at the “start” of the main-axis. Which by default is the left hand side.
justify-content: center;
Center will position the items at the center of the main axis.
justify-content: end;
End will position the items at the end of the main axis, which by default is the right hand side.
Align-Items
For align-items there are really only 3 main values that you need.
align-items: start;
Start will position the items at the “start” of the cross-axis, which is the top of the container.
align-items: center;
Center will position the items in the center of the cross-axis, which is the center of the container vertically.
align-items: end;
End will position the items at the “end” of the cross-axis, which is the bottom of the container.
Spacing
Spacing is a very useful tool when creating layouts. Spacing lets you add space (surprise) between the flex items, and since spacing causes the items to move on the main axis, you use values in the justify-content property to change the spacing. When using the spacing values for justify-content, it’s similar to applying margins to all the items. The difference is that instead of explicitly setting the margins yourself, the browser will calculate the amount of margin needed so that the entire space of the container is used.
justify-content: space-around;
Space around will position the items so that they all have the same amount of space around them.
justify-content: space-between;
Space between will position the items so that they all have the same amount of space around them, except for the first item and the last item, which will not have space on their left and right sides respectively.
justify-content: space-evenly;
Space-evenly will position the items so that the space around them is all the same amount.
With these 2 properties and 9 values you can create a surprising amount of layouts using FlexBox. Before moving on, check out these two CodePens I made and fool around with Justify and Align. The first one is just with one child in the container, the 2nd has multiple.
As I mentioned earlier, switching to flex-direction: column; will cause the main axis to be vertical, and the cross axis to be horizontal.
The cool thing is that no matter what the direction of the axes, you use the same properties to position elements on each of the axes. So even though the main axis is now vertical you will still use justify-content to position elements along the main axis. The same goes for the cross axis you still use align-items. The only difference is that now justify-content will position vertically, and align-items will position horizontally, but that’s kind of obvious.
Align-self
Now that we’ve covered the basics of how to position flex items by adjusting the container properties and values. Let’s quickly go over a couple properties and values that you have at your disposal on the items themselves.
Align self is pretty self explanatory you can use this property on a flex item to set the positioning of that item only, and not any of the other items in the container.
In this image you can see that the container has align-items: center; so the items are all aligned to the center. Except for item1 on which I put align-self: start; which takes precedence over align-items, and hence aligns item1 to the start of the container.
You can use align-self on any item in the flex container and you can position them with any of the align values.
Here's the codepen for align-self you can make some wild alignments.
Flex
Flex is one of my favorite properties in the FlexBox module. Flex lets you set a calculated width of a flex item in relation to the other items in the container. What I mean by this is that you can give an item a flex value, and the browser will use that number to figure out what the width of the item should be based on the flex values of the other items.
Here’s a more detailed explanation. Let’s say you have 2 items in a container, item1 and item2. Then let's say you set item1 to have flex: 1; and item2 to have flex:2; The browser calculates that you're specifying that the container is 3 units wide, and that item1 should take up 1 of those units and item2 should take up the other 2.
The best part is that no matter how many elements you have or how many units you set an item to be, the browser will always add them all up and calculate the widths based on the flex values. This means you can be super specific about the widths of the elements in the container. It also means that they will be 100% responsive.
Here's another example. There are 3 items in this container. item1 has a flex of 1, item2 has a flex of 2 and item3 has a flex of 3. The browser calculates 1+2+3=6 and that the container should be considered 6 units wide. Then it determines how much space each of the items should take up based on the flex value, and then it sets the widths of the items accordingly. It does all the heavy lifting for you.
Flex is a super powerful property in FlexBox, it makes it so you have a huge amount of control over the space the items take up in the container. Mess around with the codepen I made, and see how cool the flex property is.
Flex-Wrap
The last property I want to talk about is the flex-wrap property. The flex-wrap property allows for the items in the container to wrap around to the next row if there isn’t enough room for them on the first row. All you need to enable wrapping is to add flex-wrap: wrap; to your flex container.
As you can see in the image, the items all have a width of 200px, but the container is only 600px wide. But since I set flex-wrap: wrap; item4 wraps around to the next line. If the container was less than 600px wide item3 would also wrap around to the next line.
This makes flex wrap great for making responsive grids, or grids where you might not know how many elements you will have in the grid. Like if you’re pulling your items from an API where the item count is constantly changing.
You can combine this with the properties and values that we went over earlier and you can create an amazingly flexible and responsive grid. Here’s a code pen demo, mess around with it.
Conclusion
Now you know why FlexBox is one of my favorite CSS modules. And almost always is my go to when I’m creating more complex layouts. Hopefully this post helped you wrap your head around how FlexBox works and serves as a good jumping off point to allow you to start using it. Don’t forget to check out MDN to learn more about the tools in the FlexBox tool box, there’s a lot more you can do with it. Feel free to leave a comment if you have any questions or thoughts. Stay Flexible!
