Flexbox allows items to grow, shrink, and set their base size using three powerful properties:
flex-grow, flex-shrink, and flex-basis.
These properties decide how much space each item takes inside a flex container.
They are very important when building responsive layouts where screen sizes change.
Flex-grow controls how much space an item takes compared to others.
In this example, Box 2 grows twice as much as Box 1 when extra space is available.
Flex-shrink controls how items reduce in size when there is not enough space.
The second box will not shrink, while the first box will adjust its size.
Flex-basis sets the starting size of an item before growing or shrinking.
Here, the logo keeps a fixed base width while the menu area uses the remaining space.
The flex shorthand
Instead of writing three properties, you can use:
flex: grow shrink basis
Example:
flex: 1 0 200px
This shorthand makes your CSS cleaner and easier to manage.
Most developers prefer using flex instead of writing three separate properties.
Practice task
Create a flex container and:
- Add two items
- Give first item flex-grow 1
- Give second item flex-grow 3
- Set flex-basis to 100px
- Resize the screen and observe the changes
Next lesson
In the next page, you will learn about order and align-self.