The flex shorthand property is a powerful way to control how flex items grow, shrink, and set their initial size along the main axis. Instead of writing out flex-grow, flex-shrink, and flex-basis separately for each item, you can use the flex property to set all three at once. The syntax for the flex property is:

flex: <flex-grow> <flex-shrink> <flex-basis>;

The order of values is important:

• First, specify the grow factor (flex-grow);
• Next, the shrink factor (flex-shrink);
• Last, the basis (flex-basis), which sets the initial main size.

Common patterns include:

• flex: 1; is a shortcut for flex: 1 1 0%, making the item flexible and able to grow and shrink as needed, starting from zero width;
• flex: 0 1 auto; the default value, allows shrinking but not growing, with the item's initial size based on its content.

In the example above, the .item1 and .item2 elements each use the flex shorthand to combine their grow, shrink, and basis values. For .item1, flex: 2 1 100px; means the item will try to grow twice as fast as .item2 when there is extra space (because its grow factor is 2, compared to 1 for .item2). The shrink values (1 for .item1, 2 for .item2) control how quickly each item gives up space when the container gets smaller. The basis values (100px for .item1, 50px for .item2) set the starting widths before any growing or shrinking happens. By combining all three controls in a single line, the flex shorthand makes it easy to manage flexible layouts that respond smoothly to changes in container size.