This meme is funny 😆 right?. Well, I know that some of you are not able to get the sense out of this meme, let’s see if you can understand this meme after reading this blog.
What is Flexbox?
Flexbox is a part of CSS, it was added in CSS 3, in 2011. It helps to align the elements and distributing space around the element on a web page. There is more to it than this, which you will see further in this blog.
Why we need Flexbox?
Have you ever wondered, how the same website that you are viewing in laptop and on your smartphone fits the screen perfectly?. Does the developer write separate lines of code for viewing the content on mobile and laptop?. Well, yeah that was the case before flexbox came into the picture, it has a default display property that adjusts the width and alignment according to the size of the screen.
Flexbox in action
To understand flexbox, let’s take a look at a sample web page. So as of now, this is our html code and it’s web preview, without using any flex properties :-
Now, let’s dive into some of the properties of flexbox.
display : flex
Let’s assume that, we want our boxes, side by side and take up the whole width.
Woah ! , that was way too easy, I just used display : flex inside the container element and that did the trick. Easy Peasy right?.
flex : <integer>
flex : <integer> is basically the combination of flex-grow : <integer> and flex-shrink : <integer>. So you must be wondering about flex-grow and flex-shrink property. By using flex-shrink and flex-grow, we can make different elements in the row in different sizes. So, let’s see this in action. Assume that we want the box two to take more space than the other boxes, so what we have to do is just this :-
I just made changes inside the style tag, inside the various box classes. Now, we wanted the box-2 to be the main column, so we assign it with a bigger integer than the others and that did the trick.
order : <integer>
Assume that you want to rearrange the order of the boxes and you want to box-2 to be the first box, then all you have to do is this :-
I just specify the number in which I wanted the box, simple as that.
Notice that each box is of same height by default, even though the text of box-two is taking less space vertically than others.
align-items
Notice that each box is of same height by default, even though the text of box-two is taking less space vertically than others. So assume that we want box-2 to take only that much space that is required, then we have to use the flex-start value of the align-items property.
Now, say that if we want to put the box towards the bottom, what we have to do is just use the value of align-items as flex-end:-
Okay, now what if we want the box two be in the center, then we have to use the value as center.
And to tell you the secret the default value of this align-items is stretch.
flex-direction
Suppose that we want our boxes to be aligned vertically than horizontally, then we will use the value of flex-direction property as column.
Media Query
Remember, how we talked about responsive pages and how can we view the same content in laptop and smartphones without any trouble. So to achieve this, what we can do is just use a simple media query around our container.
Conclusion
In modern day world, around 98% of web pages uses flexbox to achieve responsive web pages. I hope that you would have much clearer understanding of flexbox than you have before reading this blog. So see ya on the next blog.