An item inside a flex container is given flex: 1. Which set of longhand values does that shorthand set?

Բացատրություն

A single number in the flex shorthand sets flex-grow to that number and fills in flex-shrink: 1 and flex-basis: 0%. The zero basis is the practical point: the item starts from zero size, so the container's whole main-axis space is divided by the grow factors and equal factors give visually equal items regardless of their content. flex: auto is the value that expands to 1 1 auto — it starts from each item's content size and distributes only the leftover space, so items with more content stay wider. Confusing the two is the usual reason 'equal columns' come out unequal.