Retour au cours

Lesson 62: Flex Item Shorthand: flex

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

62. Flex Item Shorthand: flex

The flex property is the shorthand for flex-grow, flex-shrink, and flex-basis. It is highly recommended to use the shorthand over the individual properties.

Syntax

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

Common Shorthand Presets

1. flex: 0 1 auto; (Default/Content-Sized)

  • grow: 0 (Will not grow).
  • shrink: 1 (Will shrink if necessary).
  • basis: auto (Base size determined by content or width/height).

2. flex: 1; (Equal Distribution)

This is shorthand for flex: 1 1 0;.

  • grow: 1 (Takes equal share of extra space).
  • shrink: 1 (Allows shrinking).
  • basis: 0 (Initial size is zero; the entire available space is shared based on the grow ratio).

css .item-equal { flex: 1; /* Perfect for columns that should always fill the parent */ }

3. flex: none; (Fixed Size)

Shorthand for flex: 0 0 auto;.

  • Will neither grow nor shrink. The item maintains its size defined by width or content.

css .fixed-item { width: 100px; /* 100px guaranteed */ flex: none; }