What does the flex shorthand property represent?

Q: What does the flex shorthand property represent?

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: ;` 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). .container { display: flex; width: 600px; border: 1px solid #ccc; } .item { background: #3498db; color: white; margin: 10px; padding: 20px; text-align: center; } .item:nth-child(1) { flex: 1 1 150px; } .item:nth-child(2) { flex: 2 1 150px; } .item:nth-child(3) { flex: 1 1 150px; } Item 1 Item 2 Item 3 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 to `flex: 1 1 0;` (items grow and shrink equally). `flex: auto;` → Equivalent to `flex: 1 1 auto;`. `flex: none;` → Equivalent to `flex: 0 0 auto;` (fixed size, no growth or shrink). `flex: initial;` → Equivalent to `flex: 0 1 auto;` (default behavior). Use `flex: 1` to evenly distribute available space among items. Use `flex: none` for fixed-size elements like buttons or logos. Combine `flex-grow` and `flex-basis` strategically for responsive layouts. Avoid mixing width and flex properties unless necessary for layout control.

Difficulty: 3/10

flex-grow, flex-shrink, flex-basis

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.

Syntax

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

What does the flex shorthand property represent?

Difficulty: 3/10

flex-grow, flex-shrink, flex-basis

Understanding the flex Shorthand Property in Flexbox

Syntax

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

What does the flex shorthand property represent?

Understanding the flex Shorthand Property in Flexbox

What does the flex shorthand property represent?

Understanding the flex Shorthand Property in Flexbox

Scenario Questions

Follow-up Questions