Understanding Flex Shrink, Flex Grow, and Flex Basis, and using these properties to their full potential
Flex-grow, flex-shrink, and flex-basis are very powerful flexbox properties that can help us create flexible content.
Flex-grow
Flex-grow tells our element whether or not it can take up additional space.
When we set a flex-grow value of 1 or larger, we are telling our element to grow to take up the available space. An element with a flex-grow value set to 0 will not grow to take up available space.
If we have more than one element in a line (row or column) that has a flex-grow value, these elements will share the available space. The total number of flex-grow values will be added up to create the “full pie” — stay with me here. Let’s say we have two elements next to one another. One element has a flex-grow of 2, and the other has a flex-grow of 1. The total number of flex-grow units will be 3. The available space in the flex container is then going to be divided by 3, and distributed accordingly. The first item (flex-grow:2;) will get 2 pieces of the available space, and the second item (flex-grow:1;) will get 1 piece of the available space. This doesn’t mean that the first item will be twice as big as the second. Remember it’s going to receive 2/3 of the remaining space pie! The second item will have 1/3 of the remaining space.
Let’s look at an example.
Let’s create a header with two children, an h1 and a nav. We will display: flex the header. At first, each of these flexed children will be the size of the content:
Let’s add flex-grow: 1; to the h1:
The h1 will grow to take up all of the available space. Let’s go back in and add flex-grow: 2; to the nav element. This will bring our total flex-grow values to 3.
Now, our h1 and nav are sharing the extra space. The nav is taking 2/3 of the extra space, and the h1 is taking 1/3 of the extra space.
Flex-shrink
Flex-shrink works very similarly to flex-grow, only instead of dealing with extra space, it deals with space not needed by an elements content.
An element with a flex-shrink value of 0 will not shrink as our page gets smaller. This is only true if there is no flex-grow value on this element. If there is a flex-grow value, the element won’t shrink smaller than its content.
An element with a flex shrink value of 1 will shrink, but not smaller than its content.
If you have more than one element per line, the total number of flex-shrink values will be considered, when dividing up how much each element should shrink by.
Flex-basis
Flex basis is best used when in conjunction with either flex-shrink or flex-grow. Let’s look at these cases:
flex: 1 0 200px;
If you have one element that has a flex-basis of 200px, flex-grow of 1, and flex-shrink of 0, this element will be at minimum 200px wide, but it will be allowed to grow if there is extra space. In this case, you can think of the flex-basis as being a minimum width.
flex: 0 1 200px;
Let’s consider the opposite case. Let’s set a flex-basis of 200px again, but let’s only set a flex-shrink of 1, flex-grow will be 0. Here we will have an element that is 200px at it’s largest, but it’s allowed to be smaller. Here flex-basis is acting like a maximum width.
An element that has a flex shrink value of 0, a flex grow value of 0, but has a flex basis pixel value, will only ever be that pixel value size. It won’t shrink and it won’t grow. This would be the same as setting a pixel value to the width property.
flex: 1 0 auto;
Auto is a cool keyword that lets us tell an element to be the size of its content. This is useful when we don’t want to give the element a min size or max size.
flex: 0 1 auto;
This is the default value the flex property is given.
Shout out to http://www.meetharis.com/, for the help!
