flex-grow, flex-shrink and flex-basis in Flexbox

In my last post, I talked about Javascript. Today, I am shifting my focus back to CSS Flexbox. I am going to explain flex property.

flex is a shorthand property for flex-grow, flex-shrink, and flex-basis. All these properties are applied to flex items. Let us take a look at the starter code that I am going to use for the explanation:

<div class="container">
  <div class="box box1">one 😎</div>
  <div class="box box2">two 🍕</div>
  <div class="box box3">three 🙏</div>
  <div class="box box4">four ⛑</div>
</div>

.box {
  color: white;
  font-size: 30px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
}

/* Colours for each box */
.box1 {
  background: #1abc9c;
}
.box2 {
  background: #3498db;
}
.box3 {
  background: #9b59b6;
}
.box4 {
  background: #34495e;
}

.container {
  display: flex;
  border: 10px solid black;
}

flex-grow

If there is extra space available in the flex container then flex-items can be made to grow to consume that extra space. flex-grow dictates what amount of the available space inside the flex container the item should take up. The default value of flex-grow is 0. Let us set flex-grow of all flex items to 1 and see what happens.

.box {
  flex-grow: 1;
}

As all the flex items have their flex-grow set to 1, they are taking extra space in equal proportion. What will happen if we set flex-grow of a particular item to be 3?

.box2 {
  flex-grow: 3;
}

We can see here that box 2 is taking up thrice as much extra available space than other flex items.

flex-shrink

flex-shrink is exactly opposite of flex-grow. If there is not enough space available in flex container then flex items need to shrink. flex-shrink defines the proportion in which all flex items will shrink. Its default value is 1. Hence, all flex items will shrink in equal proportion by default. Let us set the flex-shrink of box 1 to 4 and resize the window.

.box1 {
  flex-shrink: 4;
}

We can see that box 1 is shrinking more than other flex items.

flex-basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property". flex-basis may look similar to width property but it is not. It defines the default size of flex item along the main axis. So, when the flex-direction will change to column then flex-basis will similarize with height property rather than width. Its default value is auto.

flex

flex-grow, flex-shrink and flex-basis, all three can be set in a single line using flex property. In fact, it is recommended that you use flex instead of using three properties separately. flex-shrink and flex-basis are optional.

.item {
  flex: none | [ < 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' > ];
}

This is all about flex property in Flexbox. I would like to remind everyone that I am learning Flexbox through a great free course What The Flex Box by Wes Bos. I highly recommend it if you want to learn Flexbox in more detail.