The flex shorthand combines flex-grow + flex-shrink + flex-basis — controls how a flex item adapts to container size. Common: 'flex: 1' = 1 1 0, 'flex: auto' = 1 1 auto, 'flex: none' = 0 0 auto..item {
flex: 1;
}.item {
flex: 2 1 200px;
}min:0max:9999step:1units:px | % | em | rem | noneEquivalent to 0 0 auto — neither grows nor shrinks.autoEquivalent to 1 1 auto — grows and shrinks based on content.contentflex-basis: size based on content.max-contentflex-basis: maximum content size.min-contentflex-basis: minimum content size.fit-contentflex-basis: shrinks to content size, clamped between min-content and max-content.CSS Flexible Box Layout Module Level 1Editor's DraftW3CMDNCSSCSSCSS long text insidShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
