5 Minutes to Flexbox
I believe that flexbox is a revolution in CSS. The reason is that it makes it easier for us to create one-dimensional layouts. If you don’t know about one-dimensional layout, it is just laying out items in one direction or axis. For example, when you are laying out the items of a navbar in a single row or column.
However, if you are planning to use two directions then flexbox might not come in handy. But enough talks, let’s now move on and see how to use flexbox to build the layouts.
Understanding axis in flexbox
The whole flexbox is built upon the concept of the axis, so it is good to know what the axis is. As mentioned above, the axis is simply the direction of the content. There are only two axes when we talk about flexbox. First, we have the main axis and then we have the cross axis. It is important to understand these two topics as these are the two most important things in flexbox. Once you wrap your head around it, flexbox will be very easy for you. We will talk about the axes a little bit later in the article because there is something you need to know before we dive deep into how the flexbox works.
Containers in flexbox
Containers are one of the most fundamental topics in the flexbox. To use flexbox, you must know the concept of flexbox containers. So, in flexbox container is the area that you define to use flexbox. In simple words, it is the area where you can use the flexbox. It is called a flex container. Flex containers have items inside them known as flex items.
To make any HTML container, a flex container all you need to do is to change the display property of the container to flex.
display: flex;This will allow you to apply flexbox properties to the container, and now we have a flex container and its children elements automatically become flex items. Now you can use flexbox in whatever way you want. But first, let’s look at some of the other things that you need to know to use flexbox.
Axes in flexbox
Remember that I talked about directions at the beginning, now it’s time to take a deep look into that. There are two directions or, to be more precise, axes in the flexbox: main axis and cross axis.
Main axis
It defines the direction in which the flex items go. The main axis of a container is specified by the property flex-direction. This property can take several values like row, column, etc. I’m not mentioning the properties because it will make the post unnecessarily lengthy. But you can always look into the documentation like w3schools or just a simple google search will provide you with what you want.
Cross axis
It is the direction perpendicular to the main axis. If the main axis is the x-axis, say, then the cross axis will be in the y-direction.
Flexbox is a really long topic to fit into a small post like this one. But I’m sure that if you know the stuff above, then flexbox will be a little bit easier for you to use. What I can do is to link some great resources that you can use to learn flexbox. They really helped me and I hope that they will help you as well.
- https://flexbox.malven.co — This is the simple visual cheatsheet for flexbox which will come into handy if you are a beginner in flexbox.
- http://www.flexboxdefense.com — If you want to learn flexbox the fun way, you can use this resource to accomplish it. You need to place towers using flexbox in order to win the game. They provide you the guide before the game starts and you have 12 levels to complete. Good Luck!!
- https://flexbox.webflow.com — At Webflow they have created some of the most common layouts using flexbox. Not only that they teach you how to create every one of them. This will really help you once you have understood the basics of flexbox.
These were the top 3 resources that I wanted to let you know about. They personally have helped me a lot and hope that you can get better at flexbox using these resources.
I wish you luck on your flexbox journey!!
