CodePark/ questions / Flexbox
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Flexbox

What does the shorthand flex: 1 expand to?

flex: 1 1 0%

flex: 1 1 0% is right. A single unitless number sets flex-grow to that number, flex-shrink to 1 and flex-basis to 0%. With a basis of 0, items share the space equally, no matter what content they hold.

flex: 1 1 auto is the tempting wrong answer. That is what flex: auto means: each item starts at its content size, and only the leftover space is shared. 0 1 auto is the initial value, and 1 0 0% wrongly sets flex-shrink to 0.