CSS Flexbox Growing and Shrinking with flex-grow and flex-shrink

TL;DR CSS Flexbox's flex-grow and flex-shrink properties enable flexible layouts that adapt to different screen sizes. flex-grow allows items to take up more space, while flex-shrink allows them to give up space. By mastering these properties, developers can create responsive layouts with ease.

Mastering CSS Flexbox: Growing and Shrinking with flex-grow and flex-shrink

As a fullstack developer, you're likely no stranger to the world of CSS layouts. One of the most powerful tools in your arsenal is CSS Flexbox, which allows you to create flexible and responsive layouts with ease. In this article, we'll dive deep into two essential properties that will take your Flexbox game to the next level: flex-grow and flex-shrink.

Understanding Flexbox Basics

Before we dive into the nitty-gritty of growing and shrinking, let's quickly review the basics of Flexbox. A flex container is an element that contains one or more flex items. You can create a flex container by setting display: flex on an element.

.container {
  display: flex;
}

Flex items are the children of the flex container. By default, they will be laid out horizontally, but you can change this behavior using the flex-direction property.

Introducing flex-grow

The flex-grow property allows a flex item to grow and take up more space in its parent container. It's like giving an item a special power that says, "Hey, I want to be bigger than my siblings!"

The value of flex-grow is a unitless number that represents the proportion of available space the item should take up. For example:

.item {
  flex-grow: 1;
}

In this case, the item will take up an equal amount of space as its siblings. If you have multiple items with different flex-grow values, they'll divide the available space according to their proportions.

Example: Equal-width columns

Let's create a simple example where we have three columns that should take up an equal amount of space.

.columns {
  display: flex;
}

.column {
  flex-grow: 1;
  background-color: #f2f2f2;
  padding: 20px;
  border: 1px solid #ccc;
}

HTML:

<div class="columns">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

As you can see, each column takes up an equal amount of space. Now, let's say we want the middle column to take up twice as much space as its siblings.

.column:nth-child(2) {
  flex-grow: 2;
}

The middle column will now take up more space, while the other two columns will shrink accordingly.

Introducing flex-shrink

While flex-grow allows items to grow and take up more space, flex-shrink does the opposite. It allows an item to shrink and give up some of its space to its siblings.

The value of flex-shrink is also a unitless number that represents the proportion of available space the item should give up. For example:

.item {
  flex-shrink: 1;
}

In this case, the item will shrink by an equal amount as its siblings. If you have multiple items with different flex-shrink values, they'll divide the available space according to their proportions.

Example: Responsive navigation

Let's create a responsive navigation menu that shrinks when the screen size decreases.

nav {
  display: flex;
}

nav li {
  flex-shrink: 1;
  padding: 20px;
  border: 1px solid #ccc;
}

HTML:

<nav>
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
</nav>

As the screen size decreases, each navigation item will shrink and give up some of its space. You can adjust the flex-shrink value to control how much each item shrinks.

Using flex-grow and flex-shrink together

Now that you've learned about both properties, let's see how they work together in harmony.

Imagine a layout where you have two columns: one for content and another for sidebar. You want the content column to take up most of the space, while the sidebar should be smaller.

.columns {
  display: flex;
}

.content {
  flex-grow: 3;
}

.sidebar {
  flex-grow: 1;
}

In this case, the content column will take up three times as much space as the sidebar. Now, let's say you want the sidebar to shrink when the screen size decreases.

.sidebar {
  flex-shrink: 2;
}

The sidebar will now shrink faster than the content column, giving it more space.

Conclusion

flex-grow and flex-shrink are two powerful properties that allow you to control how your layout responds to different screen sizes. By mastering these properties, you can create flexible and responsive layouts that adapt to any situation.

Remember, practice makes perfect! Experiment with different values of flex-grow and flex-shrink to see how they work together in harmony.

Further Reading

• CSS-Tricks: A Complete Guide to Flexbox
• MDN Web Docs: flex-grow
• MDN Web Docs: flex-shrink