When does Flex-wrap kick in? — Flexbox Series Part 3

Photo by MILKOVÍ on Unsplash

Hi everyone :)

In my previous posts of the flexbox series, I have talked about flex-grow and flex-shrink.

But how does flex-wrap integrate with all these previously mention tools?

Let’s find out!

Here is the boilerplate for the HTML.

<div class=”container”>
 <div id=”item-1" class=”item”></div>
 <div id=”item-2" class=”item”></div>
 <div id=”item-3" class=”item”></div>
</div>

And for the CSS.

.container {
  background-color: lightblue;
  margin:  10px auto;
  display: flex;
  padding: 20px 0;
  width: 900px;
}.item {
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  background-color: lightcyan;
  border: 2px solid darkcyan;
}

It’s a flex container of 900px wide with 3 boxes of 200x150px.

The rest is just for styling purposes only.

As we can see the boxes occupy exactly a total of 600px inside its container.

But what happens when we shrink its size to 500px?

So let’s change the width of the container and see what happens.

.container {
   width: 500px; 
}

And here is the result!

By default, we have the properties flex-shrink set to 1 and flex-wrap set to no-wrap.

Basically what this means, is that the content will try to adjust to its new size in the same line.

Now let’s see what happens when we change the flex-wrap property to wrap.

.container {
  flex-wrap: wrap;
}

Since there was no space for the 3rd box, in the first row.

A second row was created in order for the content to fit in.

This same pattern will repeat itself if we shrink the size of the container even smaller.

.container {
   width: 300px;
}

Another row was created for the second box, so we now have 3 rows in total.

Emm… but what happened with the flex-grow and the flex-shrink properties in this type of case.

Note: The flex-grow property default is zero. So it won’t take effect until we explicitly tell it to.

Let’s find out! I’ll add this piece of code and we’ll see what happens.

.item {
 flex-grow: 1;
}

Each box occupied the space available in each row.

So, the flex-grow property will work separately in each new row and divide it’s space accordingly with its other “row-peers”

Last but not least, we’ll see what happens with the flex-shrink property.

If we continue to shrink the size of the container, the flex-shrink property will begin to work and try to fit the content.

.container {
  width: 150px;
}

As we can see, the content adjusted accordingly to its container.

The flex-shrink property will start to work once the width of the box(flex-item) won’t fit inside its container.

If you enjoyed this post, please help me with some appreciated claps!

See Ya!