Make the flexbox CSS stick
Tags: css, webdev, programming, tutorial
Published: 2021-10-09 07:54:42

---
canonical_url: "https://www.thangphan.xyz/posts/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?

```css
flex: 1 100px;
```

Here is the CSS above in detail:

```css
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`:
{% codesandbox flex-box-nfgw7 %}

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:

{% codesandbox flex-basis-8k9ni %}

#### 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:

```css
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.

![Flex Grow Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60iyrg8hyh5vt6xxz7qm.png)

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](https://www.thangphan.xyz/posts/make-it-stick/) method to help you for ease of learning.