So I recently got introduced to flexbox and just like it’s been with every new concept I’ve come across on this journey to learning software engineering, I was overwhelmed and felt I could never understand this concept. 

I read and re-read all the resources, did a ton of practice, and to an extent, I can say that I’m getting comfortable using the flexbox. 

So in this post, I’m going to be talking about most of the things I understand about the flexbox, particularly about flex-grow, flex-shrink, and flex-basis. In another post, I’ll talk about flex containers and flex items, their properties, and how to use them. 

If you are just learning to code like me and struggling to understand this concept, at the end of this post, I hope you’ll be able to get clarity about the flex properties and when to use each of them.

Without further ado, let’s dive right in!

What is flexbox?

Flexbox is a styling model introduced in the CSS3 version, it is used to lay out a web page to make it responsive on all devices. 

Before flexbox, there were other ways that web developers used to achieve responsive layout but flexbox made it easier and that made it widely adopted by most web developers.

Flexbox has some properties known as flex properties and it is what we use to tweak the flex items to fit into what we are trying to create. Talking about flex items, let’s take a brief look at what it is

Flex containers and flex items

Before you can understand how the flex properties work, you’ll need to know the difference between a flex container and a flex item because you’ll need to have a flex container and a flex item for you to apply the flex properties.

In the screenshot above, the area colored pink is the flex container and the black boxes are the flex items.

So when you want to display an item as a flex item, you use the syntax“display: flex;” This automatically creates a flex container and sets all the linked items as flexible items. 

Here’s a post where I talked deeper about flex containers and flex items.

Now that you have an idea of what flex containers and flex items are, let’s proceed to talk about how we can manipulate the flexible items using the flex properties.

There are different flex properties but today we’ll be looking at the three main sub-flex properties which are the:

flex-grow

flex-shrink and 

flex-basis. 

The flex-grow, flex-shrink, and flex-basis properties are used to manipulate the flex items. In this case, the black boxes we looked at above.

Flex-grow

The flex-grow property is used to specify how much space a flex item can take up in the flex container. This property comes in handy if you want a flex item to grow more than others.

Let’s take some examples:

Looking at the example I shared above, you’ll see that all the flex items (the black boxes) are of the same sizes. This is because the default value for flex-grow is set to 0. Meaning that all the flex items will be of the same size unless otherwise stated. 

 Now let’s make one of the items grow

If you look at the CSS section, you’ll notice that I asked the second item to grow by 1 and you can see how it has grown bigger than others. Taking up the free spaces both right and left

Things to note about the flex-grow property: 

Flex-shrink

Flex-shrink is used to tell a flex item to either shrink to fit into the flex container or not shrink.

Notice how item2 has refused to shrink? It stretches far beyond the flex container. Notice how it flows outside the pink container. 

Things to note about the flex-shrink property_

Flex-basis

The flex-basis property sets the default size of the flex items. What this means is that, once you set an element to display as flex, the flex-basis is what automatically sets the initial sizes of the flex items on the main axis if your flex-direction is set as a row or cross-axis if it’s a column. More on this here

In this example, I changed the flex-direction to display as a column and you can see that all the items are now displayed vertically but still have the same size.

Things to note about flex-basis_

Flex-property shorthand

There’s a shorthand way of doing anything in programming and the flex property isn’t an exception. Here we’ll talk about how you can set the flex property without specifically writing flex-grow, flex-shrink, and flex-basis. These can be time-consuming if you ask me.

The easiest way to set the 3 flex properties is to use flex: 1;

Writing just flex-1 sets the default value of the three flex properties of the element to flex: 0 1 auto.  which means flex-grow: 0, flex-shrink: 1, and flex-basis: auto.

You can basically set any value to the flex-items like saying flex:1 1 0;  flex 1 0 auto, flex 2 1 0; depending on what you are trying to achieve but always keep in mind that the first value is for flex-grow, followed by flex-shrink, and flex-basis being the last.

You can also set two values and omit the third one like this flex: 1 1;  this will still set the value of the omitted property to its default value. 

It is important to note that these default values are set once you display an element as flex. 

This means that using display: flex; automatically sets all the flex items to the initial value we talked about above. This means you don’t necessarily need to write flex: 1; to set the default values. 

Reference 

https://medium.com/@tiffnogueira/understanding-flex-shrink-flex-grow-and-flex-basis-and-using-these-properties-to-their-full-e4b4afd2c930

Leave a Reply

Your email address will not be published. Required fields are marked *