What is CSS flexbox?
tutorial on CSS development
- Flexbox is a new module in CSS3 that makes it easy to align elements to one another, in different directions and orders and also to change dis-alignments if necessary. e.g for responsive design.
- And this works perfectly even if you have no idea about the dimensions of these elements because
- the main idea behind flexbox is to actually give the container the ability to expand and shrink elements to best use the available space.
- So, with Flexbox, you can easily replace float layouts with much less and much more readable and logical code. And because of that,
- Flexbox completely changes the way that we build layouts, especially one-dimensional layouts because that’s where flexbox really shines
- For two-dimensional layouts, there are actually better ways of building this. E.g using the CSS grid layouts.
For all the reasons mentioned above Flexbox is a true revolution in CSS. It makes our lives as CSS developers easier. And that is why in this article we going to be learning about the key fundamentals of flexbox.
Concepts in Flexbox
There aren’t that many things that need to be understood before you and I can use CSS flexbox. What we need to know is this:
- The element on which we use flexbox is called a flex container and all we have to do in order to create a flex container is to set its display property to flex. We can also set it to flex-inline which would then create a Flex container and set that behaves like an in-line element.
2. All the direct children of the flex container are called Flex items
3. The direction in which the flex items are set out is called the main axis, which is shown with the arrow going from left to right. Then the other perpendicular axis is simply called the cross axis. We need to memorize the names of these axes because we can change the direction of the main axis and also because there are different ways of aligning elements both along the main axis and the cross axis. Let’s try not to forget these so that we can fully understand how different Flexbox-related properties work. That’s our next topic
How different Flexbox properties work
- So, the Flexbox specification defines a couple of properties that we use on the flex container in order to position and align all the Flex items.
- And then some other properties that we use directly on the flex items themselves. For now, here’s brief summary of all of them so you and I can get an idea of how Flexbox works and how many properties there are and how they work.
So the properties of a Flex container are as follows:
- flex-direction: It specifies in which direction the main axis goes. Below is a picture of the name of the property and the possible values that it can take, where the first one is the initial value. That is the default value. So the direction can go as a row which is the default direction in the one you see in the graphic below. But it can also go in the opposite direction and even up or down, which will then form a column. These concepts would get easier when we visualize them in practice. But for now, we just need to get ourselves familiar with the property and aware that these properties exist.
2. flex-wrap: this simple defines if the flex items should wrap into a new line if there is not enough space in the flex container or not.
3. justify-content: this defines how the flex items will be aligned along the main axis. So it’s super important to know where the main axis is.
4. align-items: This property is very similar to justify-content with the difference that this one defines how the Flex items will be aligned along the cross axis, not the main axis. So align-items is usually used along with justify-content. These two properties are probably the most important flexbox properties of all.
5. align-content: This only applies when there is more than one row of Flex items. In that case, align-content controls how the rows are aligned along the cross axis if there is some empty space.
Don’t worry we are gonna look at the code for this in the next article.
So the about the properties for flex items:
- align-self: It’s very similar to align-items but for one individual Flex item. So visualize this, we set align-items to center but we want one of the items to be aligned at the bottom. We can use align-self for that.
2. order: This defines the order in which one specific Flex item should appear inside the container. This is extremely helpful when reordering items for example for smaller screens.
3. Finally, we have 3 properties that together basically help Flexbox decide on the width of a Flex item. They are flex-grow, flex-shrink, and flex-basis.
- flex-grow: With this, we define how much an item can grow
- flex-shrink: With this, we define how much an item can shrink
- flex-basis: With this, we can define an item’s base width
There’s a shortened version of the above properties which is simply called flex. And this is the one that we would be using cuz it's common practice.
NOTE: In order to kickstart Flexbox you need to set the display value of the container to flex. That is:
display: flex;
Don’t forget.
Conclusion
There you have in this article we looked at the necessary things one has to be aware of in order to use CSS Flexbox. In the next article, we are going to be putting what we’ve just learnt into action. See you soon 👋( Also If you have any questions please don’t hesitate to ask me on Twitter or if you need serious tutoring you can reach me here)
