Justify-content
The CSS justify-content property distributes flex items or grid tracks along the relevant container axis when free space is available.
Web Design Playground, Second Edition
The CSS justify-content property controls how flex or grid items are distributed along their container's main axis.
- How it is used
- Arranges flex items along a container’s main axis for layouts, centering, and spaced image rows.
- How deep it goes
- Defines six Flexbox values with visual comparison and applies centering and spacing in guided layouts.
- Examples
- Uses a window-centered h1, photo-gallery header and navigation, and a spaced portfolio image row.
- What you can do after
- Apply it via CSS Flexbox to center items or distribute them along rows and columns.
Read how Web Design Playground, Second Edition explains justify-content →
Tiny CSS Projects
The CSS justify-content property controls how free space is distributed along the main axis of a flex or grid layout.
- How it is used
- Positions flex children by distributing leftover space, from centering a profile card to separating credit-card details.
- How deep it goes
- Explains four values through layout rules and shows why unequal item widths can make a space-around row look off-center.
- Examples
- Shows a centered profile card and actions, spaced profile statistics, and details arranged across a virtual credit card.
- What you can do after
- Apply it via CSS Flexbox to center children or distribute them across a container, while checking gaps and unequal widths.
Web Design Playground
A CSS alignment property that distributes and aligns items along the main axis of a flex container or grid container.
- How it is used
- Arranges flex items along a container’s main axis after flex-direction establishes that axis.
- How deep it goes
- Defines five flexbox values and explains the uneven outer spacing produced by space-around.
- Examples
- Uses a centered h1 and a portfolio layout with a centered row and top-aligned column.
- What you can do after
- Apply it via CSS Flexbox to place items at an axis start, end, center, or distributed spacing.
CSS in Depth, Second Edition
The CSS justify-content property distributes grid tracks or flex items along the container's inline or main axis when free space is available.
- How it is used
- Positions flex items or grid tracks along the relevant horizontal or main axis when free space remains.
- How deep it goes
- Explains core values, logical-direction behavior, spacing differences, and calculation order, while deferring exhaustive examples.
- Examples
- Demonstrates a centered stylized price using flex items and positions grid tracks within an oversized grid container.
- What you can do after
- Apply justify-content to center, edge-align, or distribute flex items and grid tracks according to available space.
Read how CSS in Depth, Second Edition explains justify-content →
Related concepts
- main axisuses · The main axis is the primary direction in which a flex container arranges and distributes its flex items.
- flexboxconfigures · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- flex containerconfigures · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
- place-contentequivalent to · The CSS place-content shorthand property sets how content is aligned and distributed along a container’s axes.
- grid containerconfigures · A grid container is an element whose display mode establishes a CSS Grid formatting context for laying out its child elements as grid items.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.