Understanding the flex Shorthand Property in Flexbox
The flex shorthand property in CSS defines how a flex item grows, shrinks, and sets its base size within a flex container. It combines three individual properties — flex-grow, flex-shrink, and flex-basis — into a single, concise declaration.
flex: <flex-grow> <flex-shrink> <flex-basis>;Each value is optional, and omitted values fall back to defaults.
flex-grow: Defines how much a flex item will grow relative to the rest when space is available (default: 0).flex-shrink: Defines how much a flex item will shrink relative to others when space is limited (default: 1).flex-basis: Defines the initial size of the item before space distribution (default: auto).
In this example, Item 2 grows twice as fast as Items 1 and 3 because its flex-grow value is 2. All items start with a base width of 150px and shrink equally if necessary.
flex: 1;→ Equivalent toflex: 1 1 0;(items grow and shrink equally).flex: auto;→ Equivalent toflex: 1 1 auto;.flex: none;→ Equivalent toflex: 0 0 auto;(fixed size, no growth or shrink).flex: initial;→ Equivalent toflex: 0 1 auto;(default behavior).
Use
flex: 1to evenly distribute available space among items.Use
flex: nonefor fixed-size elements like buttons or logos.Combine
flex-growandflex-basisstrategically for responsive layouts.Avoid mixing width and flex properties unless necessary for layout control.