This article was originally published at: https://www.blog.duomly.com/flexbox-cheatsheet/
Probably almost everybody in the front-end industry heard something about the flexbox and benefits which it can give to us when we need to design a grid. In this article, I would like to explain what flexbox is and how we can use it to save a lot of our time.
Flexbox is a CSS layout module that allows us to setup nice-behaving and responsive grid in a speedy and friendly way. Let’s see a few most critical elements of flexbox which we can use in our daily work.
1. How to align content to left
Very often, we would like to set up our content on the one side of the page, and it’s a bit similar to the float left, but not 100% the same. We can align our elements to the left by specifying a container’s property flex-direction: row.
2. How to align content to the right
As in the previous example, we align content to the one side. This time we align content to the right side of the container.
We can align our elements to the right by specifying a container’s property flex-direction: row-reverse.
3. How to align content to center horizontally
What I use very often, and it’s much more challenging to set up without flex, is centering content to the container.
If we would like to do center our elements in the horizontal position, we need to add property justify-content: center to our container.
4. How to justify-content
If we would like to justify our elements, we need to add a similar property like in the previous example, but instead of the center we are using method space-between, so our property should look like justify-content: space-between
5. How to setup element one per line
If we would like to set up elements like in the vertical column, we can do it as well.
To set up a column, we need to specify our container with flex-direction: column.
6. What is flex-grow
Flex-grow is a property that specifies how much space our elements should take.
By default, flex-grow is set up as 1and it means our element takes all space which belongs to him (for example, if we have 4 elements, one element takes 25% of space). But we can specify targeted elements with a flex-grow: xx (where xx is number), and if we will, for example, set up only one element as flex-grow: 2, that one element takes two times more space than rest of our elements.
7. How to setup elements on top of the container (align-items:flex-start)
If we would like to set up all our child elements on the top of the container, we can easily do it by adding align-items:flex-start to the container.
8. How to setup elements on the bottom of the container (align-items:flex-end)
Opposite to the previous example now, we specify items on the bottom of the container, to that we need to add a similar property, but instead of start, we use end.
Our property should be align-items:flex-end then.
9. How to vertically and horizontally align-center elements (align-items: center)
What is much more useful and without a grid, very often is done by position absolute, and translates, now we can do very simple. To center vertically and horizontally the elements, we need to specify two properties in the container. First is align-items: center and second is justify-content: center.
10. How to fulfill the whole container’s height with items (stretch)
Sometimes we would like to have items that have a height of 100% of our container’s height. We can do it in a few ways, but now I would like to show you one with a flexbox. To do that, you need only set up our container’s property as align-items: stretch. Voila!
11. How to set up the width of an element
What if we would like to set up a few elements width related to the number of elements?
We can use flex for that and do it super quickly! To do that, we can set up all items as flex: 1, and elements which we would like to be, for example, 2 times bigger than rest as flex: 2.
12. How to set up a grid
With flexbox, we can set up a nice grid in a few moments. In this example, we do set up a standard blog grid, with menu, blog post, sidebar, and footer.
To do this, we do start from setup flex-flow: row wrap in our container. Next, we need to set up all of our elements as flex: 1 100% what set up all of the elements as 100% width. Now we can go into a body of our grid, and set up post length by setting flex: 3 0; and sidebar length by flex: 1 0; what means our sidebar length should be 3 times bigger than sidebar length. That’s all! We have our simple grid created!
Conclusion
I hope now you know the basics of the flexbox, and you should be able to use them in your daily work. Flexbox is much more productive, and you can find it much more in-depth, but I wanted to tell you about a few methods which I use in my daily work and what gives me much higher productivity and saves my time a lot.
Thanks for reading!
Top comments (11)
I prefer to use Grid
Read through this whole article just to say this?
I'm gonna go find a Grid article and post how I like to use flex-box. Lol.
It's not important for me what do you want to learn or posting.i just said I prefer Grid.
Then do it on a post about grid. Your preference has nothing to do with this post.
You should think of simply nesting flexbox inside Grid
Good post
This was helpful, thank you.
Thanks! We are very happy you like our content :)
This is a good one, and I also like you colorful items👓
One good topic that sometimes is pretty useful is flex order, in my opinion, it could be related in this list. Congrats, great post.
Good point! I like flex order as well, I don't know why I didn't add it :)