There are a lot of doubts about how to use Flexbox. Do flex 1 be the same size as flex 10? And what about flex 0.1? Why that's not positioning in the center of the screen? Well, buckle up, kids! We're about to learn something.
What is Flexbox?
It's just a way to manage the layout on your web or your applications using CSS that's based primarily on 2 things: Where something will be placed and what's the direction of the content.
The first part to actually start using Flexbox is to add the property to a container. This can be done 2 ways:
- Adding the property
display: flexto a container to make this and their children to use Flexbox. (recommended at the top container that wraps the app or the component) - Adding the property
flex: 1to a container that will only make that container to be flex.
And with this comes our first question. Why is flex number 1?
Actually, we use it as a way to determine the unit of all the container size as 100%, but flex works with mathematical divisions:
If we have a container with no other containers at the same level and we have a flex: 10 is like having 10/10 = 1.
<div style="background-color: red; flex: 10; height: 100vh;"> <p>This is a full screen container</p> </div> But now, let's imagine we have two containers at the same level, one has flex: 1 and the other one flex: 3, then we take the sum of the flex number, that will be our denominator for every division and every flex will be the numerator for each container. The first container will take 1/4=0.25 (25%), the other one will take 3/4=0.75 (75%), and the sum of both results will be 1 (100%) of the parent container.
<div style="background-color: red; display:flex; flex: 10; height: 100vh;"> <div style="background-color: blue; flex: 1;"> <p>this will be 25% of the container size</p> </div> <div style="background-color: yellow; flex: 3;"> <p>this will be 75% of the container size</p> </div> </div> This division will work for whatever number we declare on the flex property.
Let's give some direction to it
So, now we know how to use the basic flex and how much space we can take with the flex number, now it's time to give a direction to the container items. For this, we can rely on flex-direction property.
This property has 4 values: row, column, reverse-row and reverse-column. If you're working on a mobile app with React Native, for example, the property flex-direction will take column like default value, but for web, the default is row because of the screen size and usage for apps. The values exposed for this property just set what's the principal flex axis; those values talks a lot about itself but will have some changes in future properties we'll talk about in this tutorial.
Justifying and aligning
If we want, for example, to align something on the center of the screen we have to rely on justify-content and align-items:
<div style="display:flex; height: 100vh; justify-content: center; align-items: center;"> <p>Centered</p> </div> Now is that simple to align center an element!
But wait, now this is where the plot thickens. These properties help you positioning the elements inside a flex container but will work differently depending on the direction we give to the flex container.
The values for justify-content are:
- flex-start: the elements positioning at the beginning of a flex container direction. This is the default value.
- flex-end: the elements are positioning at the start of a flex container direction.
- center: the elements are positioning at the center of the container
- space-between: the elements are distributed with a space between them. Each space will depend on how many elements are inside the container
- space-evenly: the elements are distributed with space before and after. Each space will depend on how many elements are inside the container
And the values for align-items are:
- stretch: Items are stretched to fit the container
- center: Items are positioned at the center of the container
- flex-start: Items are positioned at the beginning of the container
- flex-end: Items are positioned at the end of the container
- baseline: Items are positioned at the baseline of the container
Also, depending on flex-direction, justify-content and align-items can align in different directions. Why is that? Because flex-direction sets the principal axis of the container and justify-content works in that axis, meanwhile align-items works on the secondary axis, so visually will be different. I know this is a little confusing, but with some practice, this will be really easy to understand.
Now it's time to Flex:
With all the information given here, you can start the world of Flexbox!
There's a lot of information about this that will be covered in another post and, it's fair to point out that this guide is for beginners.
If you want more information about this, there's a lot of free tutorials to see:
I do this completely non-profit, but if you want to help me you can go here and buy me a coffee 😉