Summary  
This chapter covers how to use the CSS flex properties `flex-grow`, `flex-shrink`, and `flex-basis` to control how flex items expand, contract, and set their initial sizes within a flex container.  

General domain of usage  
Responsive web layout design

When you need precise control over how your flex items behave inside a container, three properties are essential: `flex-grow`, `flex-shrink`, and `flex-basis`. Each property handles a different aspect of an item's size and flexibility. 

- `flex-grow` determines how much a flex item will expand to fill extra space; 
- `flex-shrink` decides how much it will shrink when there is not enough space;
- `flex-basis` sets the initial main size of the item before growing or shrinking happens. 

These properties interact to create powerful, responsive layouts.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAuY29udGFpbmVyIHsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIHdpZHRoOiA0MDBweDsKICAgICAgfQogICAgICAuaXRlbTEgewogICAgICAgIGZsZXgtZ3JvdzogMjsKICAgICAgICBiYWNrZ3JvdW5kOiAjY2ZjOwogICAgICB9CiAgICAgIC5pdGVtMiB7CiAgICAgICAgZmxleC1ncm93OiAxOwogICAgICAgIGJhY2tncm91bmQ6ICNmY2M7CiAgICAgIH0KICAgICAgLml0ZW0gewogICAgICAgIGZsZXgtYmFzaXM6IDgwcHg7CiAgICAgICAgaGVpZ2h0OiA0MHB4OwogICAgICAgIG1hcmdpbjogNHB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0gaXRlbTEiPkdyb3cgMjwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIGl0ZW0yIj5Hcm93IDE8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

In the example above, both items start with a `flex-basis` of 80px, but they have different `flex-grow` values. The container is 400px wide, so after the initial sizes and margins are accounted for, there is extra space to distribute. The first item has `flex-grow: 2`, while the second has `flex-grow: 1`. This means the available space is split into three parts: the first item gets two parts, and the second gets one. As a result, the first item becomes twice as wide as the second, showing how `flex-grow` lets you control the proportion of space each item receives when the container has extra room.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAuY29udGFpbmVyIHsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIHdpZHRoOiAzMDBweDsKICAgICAgfQogICAgICAuaXRlbTEgewogICAgICAgIGZsZXgtc2hyaW5rOiAyOwogICAgICAgIGJhY2tncm91bmQ6ICNjZmM7CiAgICAgICAgd2lkdGg6IDIwMHB4OwogICAgICB9CiAgICAgIC5pdGVtMiB7CiAgICAgICAgZmxleC1zaHJpbms6IDE7CiAgICAgICAgYmFja2dyb3VuZDogI2ZjYzsKICAgICAgICB3aWR0aDogMjAwcHg7CiAgICAgIH0KICAgICAgLml0ZW0gewogICAgICAgIGhlaWdodDogNDBweDsKICAgICAgICBtYXJnaW46IDRweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIGl0ZW0xIj5TaHJpbmsgMjwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIGl0ZW0yIj5TaHJpbmsgMTwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

This second example demonstrates how `flex-shrink` works. Both items are set to `width: 200px`, but the container is only 300px wide, so there is not enough space. The first item has `flex-shrink: 2`, and the second has `flex-shrink: 1`. This means the first item will shrink twice as much as the second to fit into the container. As a result, the first item becomes noticeably smaller than the second, showing how `flex-shrink` controls how items reduce their size when space is tight.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAuY29udGFpbmVyIHsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICB9CiAgICAgIC5pdGVtMSB7CiAgICAgICAgZmxleC1iYXNpczogMTIwcHg7CiAgICAgICAgYmFja2dyb3VuZDogI2NmYzsKICAgICAgfQogICAgICAuaXRlbTIgewogICAgICAgIGZsZXgtYmFzaXM6IDYwcHg7CiAgICAgICAgYmFja2dyb3VuZDogI2ZjYzsKICAgICAgfQogICAgICAuaXRlbSB7CiAgICAgICAgaGVpZ2h0OiA0MHB4OwogICAgICAgIG1hcmdpbjogNHB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0gaXRlbTEiPkJhc2lzIDEyMHB4PC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0gaXRlbTIiPkJhc2lzIDYwcHg8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

In this final example, you can see the effect of `flex-basis`. The first item starts at 120px wide, and the second at 60px, regardless of their content. This property sets the starting size for each item before any growing or shrinking occurs, giving you control over the initial layout. By adjusting `flex-basis`, you can decide how much space each item should take up by default, making it a key part of building flexible and predictable flexbox layouts.

Which statement best describes the role of the `flex-grow`, `flex-shrink`, and `flex-basis` properties in flexbox layouts?

Build flexible, responsive layouts using CSS Flexbox. This course breaks down how Flexbox organizes space, aligns items, and simplifies complex positioning problems in modern web design.

Explore how Flexbox introduces a new way to organize and align elements in modern web layouts. Understand the flex formatting context, how the main and cross axes work, and how to control item flow with direction, wrapping, and shorthand properties.

Discover how to position and distribute elements precisely across a container using Flexbox alignment properties. Learn to balance space, adjust sizing with flexible units, and create layouts that adapt naturally to different screen sizes.

Apply Flexbox concepts to more complex design challenges. Reorder individual items, nest multiple flex containers, and compare Flexbox with CSS Grid to choose the best layout tool for any situation.

Controlling Flex Items' Behavior

Awesome!

Controlling Flex Items' Behavior