The justify-content property aligns items along the main axis (in flex) or inline axis (in grid/multicol) within the container. Controls distribution of free space at edges, center, or between/around items..flex {
justify-content: center;
}.toolbar {
display: flex;
justify-content: space-between;
}normalDefault behavior of the container (default).startItems packed to the start of the axis.endItems packed to the end of the axis.centerItems centered on the axis.flex-startItems at the start of the axis (in flex containers).flex-endItems at the end of the axis (in flex containers).leftItems packed left (physical).rightItems packed right (physical).space-betweenEqual space between adjacent items; no space at edges.space-aroundEqual space around each item — half-spaces at edges.space-evenlyTruly equal spacing — same gap everywhere (including edges).stretchItems stretch to fill the container if their size is auto.safe: if overflowing, alignment falls back to start to avoid clipping.unsafe: keeps alignment even on overflow.CSS Box Alignment Module Level 3Editor's DraftW3CMDNCSSCSSCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
