Q11: How do flex-grow, flex-shrink, and flex-basis operate in flex shorthand?
flex-grow: Ratio dictating how much item expands to fill remaining space.flex-shrink: Ratio dictating how much item shrinks when total size exceeds container.flex-basis: Initial baseline size of item before grow/shrink space distribution. Shorthand:flex: <grow> <shrink> <basis>.
Flex Item Shorthand Variations
.flex-grow-item {
flex: 1; /* flex: 1 1 0% */
}
.flex-fixed-item {
flex: 0 0 250px; /* Fixed 250px width */
}💡 flex: 0 0 250px locks column width, preventing growth or shrinking.
Key Takeaways
flex: 1expands toflex: 1 1 0%, forcing equal size distribution.flex: 0 0 200pxlocks item to fixed 200px dimension.
Knowledge Check
What does setting flex: 0 0 200px achieve on a flex child?