🎯 CSS flex Property

The flex CSS property is a shorthand property used in Flexbox layouts that defines how a flex item grows, shrinks, and its initial size inside a container.

It combines flex-grow, flex-shrink, and flex-basis into a single rule for easier layout control.

flex: flex-grow flex-shrink flex-basis;
                

Defines how much a flex item grows relative to others when extra space is available.

Defines how much a flex item shrinks when space is limited.

Sets the initial size of the flex item before growing or shrinking.

The item size is calculated automatically based on content.

Resets the property to default value (0 1 auto).

.container {
    display: flex;
}

.item {
    flex: 2 1 150px;
}
                

This means the item grows more than others, shrinks normally, and starts with 150px base width.