Flex Shorthand Patterns
Master the flex shorthand and understand common values like flex: 1, flex: none, and flex: auto.
The flex Shorthand Revisited
The flex shorthand sets flex-grow, flex-shrink, and flex-basis in one declaration. Understanding the shorthand variants is essential for real-world layouts.
flex: 1
flex: 1 is equivalent to flex: 1 1 0%. Items start from zero basis and grow equally to fill available space. This is the most common equal-column shorthand.
.equal-cols > * {
flex: 1; /* all columns equal width */
}