Make the flexbox CSS stick

Hi friend! Today, we are going to review about the flexbox in CSS.

Let's dig in!

Flexbox

The reason flexbox exists is that it helps us easy to customize the layout of content.

We can take some advantages below using flexbox:

• Being able to make the flex item in flex container have the same sizes(with, height), and don't need to care about their intrinsic size.

• Customize the position of the flex items in the simplest way.

Have you ever seen this CSS before?

flex: 1 100px;

Here is the CSS above in detail:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;

Let's now discover the property CSS above in more detail!

Flex basis, grow, shrink

You can think of this property as a width milestones of the element. It sets the minimum width of the element, and you might know the width also is able to shrink(at least min-content size of the element) or grow, it dependents on the situation we set CSS.

First of all I would love to take a glance about min-content and max-content in CSS.

Here is the example code using min-content and max-content:

Then we can said that:

min-content sets the width of the element as the longest word's width. In the example above, it's "content"'s width.

max-content sets the width of the element as the total width of text content. In the example above, it's "Max content" 's width.

I'm using the example below for ease of understanding the concepts:

Flex basis

In the first example above, I set flex-basis: 0 for the item element, and you can see, it makes the item width is the min-content value.

The flex item can be shrink at least min-content size of the text content.

Flex shrink

In the second example above, I set the parent element to 100px, and the item element to flex-basis: 200px. It turns out using flex-shrink: 0 the item width will be wider than the parent element width. You can set flex-shrink: 1 and see the item width is equal with the parent element. It means the flex item is shrunk to 100px.

The flex item can be shrunk in case its width is greater than the parent element width.

Flex grow

In the third example above, I set:

flex-basis: 50px;
flex-grow: 1;

for the flex item. The item width then became wider than 50px, in this case, it distributed the item width and grew it up. You can set flex-grow: 0 and the item width will be exactly 50px.

You can use firefox to see what your flex item behaves.

In the fourth example above, I set flex-grow: 2 for the third item element. As you can see, the third item width became wider than the first and second item.

It means the remain size will be distributed based on the value of flex-grow that we set for each the flex item.

Conclusion

We have just reviewed the flexbox in CSS. Why don't take a bright review for your self. I would like to share with you the Make it stick method to help you for ease of learning.