Flexbox Properties
The flex-grow, flex-shrink, and flex-basis properties are fundamental for controlling the behavior of elements inside a flex container.
Syntax
These properties are applied to flex items inside a container:flex-grow: 1;flex-shrink: 0;flex-basis: 100px;
Example:.container {
display: flex;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-shrink: 0;
}
.item3 {
flex-basis: 100px;
}
Purpose
Using these properties allows you to:
- Control how elements grow and shrink relative to their container.
- Set the initial size of elements inside a flex container.
Exercises
The rest of the content is available only for registered and premium users!