CSS Flexbox #5. The flex-shrink Property

| Web Design

CSS Flexbox #5. The flex-shrink Propery

As you already learned, the flex-grow property specifies how items grow (or expand) to fill the available space in the flex-container. The flex-shrink property specifies how items behave when there’s not enough space available for all of them to fit.

The default value for flex-shrink is 1. This means that all items shrink in an equal proportion.

Let’s demonstrate these concepts with an example.


Step # 1. Create the HTML

  • Open your preferred code editor.
  • Create an empty HTML file.
  • Visit this page, copy the HTML code and save the file.

Step # 2. - The CSS Styles

  • Create a file called style.css (the file is already linked in the tag of the HTML code).
  • Copy and paste the following code:

/* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

CSS Flexbox #5. The flex-shrink Property


Step # 3. - The CSS Flexbox Styles

Declare the parent container as a flex-container.

  • Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; }

The parent container is flex-container now and its children have turned into flex-items, as you already know. Go back to your code editor in order to change the width of the parent container to 600px.

  • Edit the CSS file:

.container { display: flex; background-color: #f5ca3c; width: 600px; }

Now, change the width of the items to 250px each.

  • Edit the CSS file:

.item { width: 250px; }

Despite the fact that you declared each item to be 250px wide, items cannot overflow the width of their parent. So each item will shrink to 200px in the same proportion (flex-shrink: 1) to fill the available space.

Let’s add this property with the default value to the first item for checking purposes.

  • Edit the CSS file:

.item1 { flex-shrink: 1; }

The layout remains unchanged. Now change the value of the flex-shrink property for the first item once again.

  • Edit the CSS file:

.item1 { flex-shrink: 2; }

The first item has reduced its width to 175px, the 25px “available space” left free are taken proportionally by the other two items.

Now change the width of the parent container to 500px.

  • Edit the CSS file:

.container { display: flex; background-color: #f5ca3c; width: 500px; }

The difference between the first item and its siblings is now more noticeable.

But what about an item having a flex-shrink value of 0?

  • Edit the CSS file:

.item3 { flex-shrink: 0; }

Item 3 did not shrink at all, whereas items 1 and 2 have to share the available space left in the container. Item 1 shrinks twice as “quick” as item 2, because of the flex-shrink property.

Setting a container width is not practical in the real world, because the width of the parent container depends on the width of the screen of the device you’re using. However, it is good for demonstration purposes.

Next tutorial will deal with the flex-basis property, which sets the initial width of the flex-items. That way, you can combine flex-grow, flex-shrink and flex-basis in one shorthand to obtain better results.


Previous tutorials of this series


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.