What is the flex shorthand property and what do its three values mean?

flex is a one-line shorthand that sets flex-grow, flex-shrink, and flex-basis together, in that order.

Rather than writing three separate properties on every flex item, you combine them. The order is grow, then shrink, then basis:

.item {
  flex: 1 0 auto;
  /*    │ │ └── flex-basis: auto */
  /*    │ └──── flex-shrink: 0   */
  /*    └────── flex-grow: 1     */
}

Patterns worth memorizing:

Gotcha: flex: 1 quietly sets flex-basis to 0, not auto. That's why several flex: 1 items come out equal width even when their content differs — a frequent source of "why are my columns the same width?" confusion.