Flex

`flex-grow`

flex-grow is a CSS property that allows the flex items to grow to specific amount inside of the parent container. Let’s say we have the code example below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="box one"><span>One</span></div>
      <div class="box two"><span>Two</span></div>
      <div class="box three"><span>Three</span></div>
    </div>
  </body>
</html>

The initial value of flex-grow of elements is set to 0, which means each flex items cannot grow its value. As we have not given any flex-grow value for .box element yet, .box elements keep their width same (200px).

Now, let’s give flex-grow value to 1 to the first element and see what happens.

style.css


.box:nth-of-type(1) {
  background-color: orange;
+
  flex-grow: 1;
}

As you can see from above, .box element of One occupied all of the free space whereas Two and Three .box elements still remained same, as we haven’t given any flex-grow value.

From here, we can think of flex-grow as a fraction. In other words, element with flex-grow value will take n fraction or slice of free space.

Now, let’s give flex-grow value of 1 to Two element also and see what happens.

style.css


.box:nth-of-type(2) {
  background-color: aqua;
+
  flex-grow: 1;
}

This time, One element and Two element are both sharing the same free space and they took as same proportion of remaining free space while Three element still remained same. Likewise, if we give flex-grow value for One, Two and Three as 1, 2, and 3 respectively, this means:

One element will take 1 fraction of free space (1/6).
Two element will take 2 fractions of free space (2/6).
Three element will take 3 fractions of free space (3/6).

style.css


.box:nth-of-type(1) {
  background-color: orange;
  flex-grow: 1;
}

.box:nth-of-type(2) {
  background-color: aqua;
-
  flex-grow: 1;
+
  flex-grow: 2;
}

.box:nth-of-type(3) {
  background-color: green;
+
  flex-grow: 3;
}

Which will end up showing as below:

`flex-shrink`

On the other hand, flex-shrink is a CSS property to allow child flex elements to be shrinked.

Let’s take another example code below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="box one"><span>One</span></div>
      <div class="box two"><span>Two</span></div>
      <div class="box three"><span>Three</span></div>
    </div>
  </body>
</html>

Unlike the flex-grow example, this time each .box elements’ width are increased to 200px (from 90px) which exceeds the .container total width of 600px. If we give flex-shrink value to 0 to the all .box elements, this means we are not allowing any .box elements to be shrinked whatsoever.

style.css


.box {
  display: flex;
  width: 200px;
  height: 60px;
+
  flex-shrink: 0;
}

The default value of flex-shrink is set to 1, which means all child flex elements can be shrinked based on the width of the parent’s element.

Now, let’s give flex-shrink value of 2 to the Three .box element and see what happens.

style.css


.box {
  display: flex;
  width: 200px;
  height: 60px;
-
  flex-shrink: 0;
}

.box:nth-of-type(3) {
  display: flex;
+
  flex-shrink: 2;
}

It seems there weren’t any significant differences but if you take a look when shrink your browser window horizontally, you will notice that Three element will shrink twich as much as One and Two elements do.

If you give flex-shrink value of 3 to Two element as below. That means Two element will shrink as third times as it do compared to the One element whose flex-shrink value is set to 1.

style.css


.box:nth-of-type(2) {
  display: flex;
+
  flex-shrink: 3;
}

`flex-basis`

flex-basis CSS property determines the initial starting size of flex child item before flex-grow or flex-shrink works.

We will be using the same example we used at the flex-grow section earlier.

The default flex-basis value is set to auto, which means child flex items will follow the initial width that we gave. If width of element is not given, then child flex item will have width as wide as the inner content has.

ℹ️

auto value could be written as content as well but not widely supported for many browsers.

Now, let’s take a look what happens if we give different CSS flex-basis value for each boxes, which means 50px for One, 100px for Two, 150px for Three, respectively.


.box:nth-of-type(1) {
  background-color: orange;
+
  flex-basis: 50px;
}

.box:nth-of-type(2) {
  background-color: aqua;
+
  flex-basis: 100px;
}

.box:nth-of-type(3) {
  background-color: green;
+
  flex-basis: 150px;
}

As you can see, each boxes now has minimum width as we specified in flex-basis.

Mixing `flex-basis` and `flex-grow`

Let’s give another example. This time, we will

Give flex-basis for One element as 300px.
Give flex-grow of 1 for all .box elements with each elements’ size of 200px.

and see what will happen.


.box {
  display: flex;
  height: 60px;
+
  width: 200px;
+
  flex-grow: 1;
}

.box:nth-of-type(1) {
  background-color: orange;
+
  flex-basis: 300px;
}

Unlike the flex-grow cases, this time One element took a little bit longer space than others because flex-basis is given to 300px.

Resizing flex child elements equally

What if we would like to ignore the initial size of child flex elements and make it all equally same? In this case, you can give 0 value to flex-basis. What this will do is to tell browser to divide sizes of child flex elements equally based on the total parent flex container.


.box {
  display: flex;
  height: 60px;
-
  width: 200px;
-
  flex-grow: 1;
+
  flex-basis: 0;
}

.box:nth-of-type(1) {
  background-color: orange;
-
  flex-basis: 300px;
}

Before: Only using flex-grow 1

After: Combining both flex-grow of 1 and flex-basis of 0

As you can compare two different cases, when we applied only flex-grow of 1 to all .box elements, each child flex elements will take up free empty spaces but with different proportion of its contents (Before). However, if we applied flex-basis of 0 altogether, child flex elements now began to have equal widths based on the parent flex container.

Flex

flex-grow

flex-shrink

flex-basis

Mixing flex-basis and flex-grow

Resizing flex child elements equally

`flex-grow`

`flex-shrink`

`flex-basis`

Mixing `flex-basis` and `flex-grow`