flex

flex is the shorthand for flex-grow, flex-shrink, and flex-basis on a flex item. It controls sizing along the container’s main axis.

Equal starting bases

Both items use 1 1 0, so they start from a zero basis and share available space equally here. The explicit zero avoids the 0% versus 0 distinction in indefinite containers.

<div class="row">
  <div>One</div>
  <div>Two</div>
</div>

.row {
  display: flex;
  width: 240px;
  gap: 0.5rem;
}
.row > div {
  flex: 1 1 0;
  min-width: 0;
  background: #dbeafe;
}

A flexible label beside a fixed badge

The label can grow and shrink. The short badge uses none so it stays at its content-based size.

<div class="row">
  <p class="label">Workshop registration is open.</p>
  <span class="badge">New</span>
</div>

.row {
  display: flex;
  gap: 0.75rem;
  max-width: 22rem;
}
.label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.badge {
  flex: none;
  background: #dbeafe;
  padding: 0.25rem;
}

Values and resets

The initial longhands are 0, 1, auto; none are inherited. flex: initial means 0 1 auto, auto means 1 1 auto, and none means 0 0 auto. The shorthand resets all three constituents, even when you omit values.

A single nonnegative number such as flex:1 is commonly implemented as 1 1 0%; the specification’s zero basis and a percentage zero can behave differently in an indefinite main size. Use an explicit three-part value when that matters. Grow/shrink cannot be negative.

Why equal flex values may look unequal

Content-based minimums, padding, borders, and different bases can change final item sizes. Flex applies to items, not the container. Use min-width or min-height appropriately when intrinsic minimums prevent shrinking, and preserve a sensible reading order.

Sources and browser support

MDN: flex describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.