Flex Shorthand in CSS
From the CSS Flexbox cheat sheet · Flex Items · verified Jul 2026
Flex Shorthand
Combine grow, shrink, and basis values in a single flexible property
css
.item {
flex: 1; /* grow: 1, shrink: 1, basis: 0 */
flex: 0 1 auto; /* default values */
flex: 1 1 0; /* common equal columns */
flex: 2 1 100px; /* grow: 2, shrink: 1, basis: 100px */
}html
<div class="container">
<div class="item flex-1">flex: 1</div>
<div class="item flex-2">flex: 2</div>
<div class="item flex-none">flex: none</div>
</div>🎨 Flex Shorthand
flex: 1
flex: 2
none
🎯 Combines grow, shrink, basis
💡 flex: 1 for equal columns
⚡ Most common flex property