CSS justify-content Property

Overview

This lecture explains the CSS justify-content property, which controls how space is distributed between and around items along the main (or inline) axis in flex, grid, and multicol containers.

Purpose and Applicability

• justify-content determines space distribution between/around content items along the main axis of flex containers and inline axis of grids/multicols.
• Applies to flex, grid, and multicol containers, not to block containers.
• Does not participate in baseline alignment or support baseline values.

Syntax and Possible Values

• Positional alignment: start, end, center, flex-start, flex-end, left, right.
• Normal alignment: normal (acts as stretch, or as start in flex).
• Distributed alignment: space-between, space-around, space-evenly, stretch.
• Safe/unsafe overflow alignment: e.g., safe center,unsafe center.
• Global values: inherit, initial, revert, unset.

Value Behaviors

• start/end: Items flush to the start/end edge of container.
• flex-start/flex-end: Like start/end but specific to flex containers.
• center: Items centered along the axis.
• left/right: Items flush to left/right edge (depends on writing mode).
• normal: Behaves as stretch or start depending on layout.
• space-between: Equal space between items, first and last touch container edges.
• space-around: Equal space between items, half-space at edges.
• space-evenly: Equal space before, between, and after items.
• stretch: Auto-sized items expand to fill space equally.
• safe: Prevents overflow by aligning as start if overflow would occur.
• unsafe: Allows desired alignment even if overflow occurs.

Usage Details and Notes

• In flexbox, affects alignment along the main axis after auto-margins and growth are resolved.
• Has no effect if a flex item is set to grow and consumes all available space.
• In grid, impacts column alignment, not individual grid items.
• Grid and flex containers must have extra space for justify-content to have any visible effect.

Examples Summary

• Example 1: Grid with justify-content: space-evenly distributes space equally before, between, and after columns.
• Example 2: Using the safe keyword prevents center alignment if overflowing; items align at the start.
• Example 3: Live demo shows how different values affect flex item distribution and alignment.

Key Terms & Definitions

• Main Axis — The primary axis along which flex or grid items are laid out (row or column depending on direction).
• Alignment Container — The container whose items are being justified (flex, grid, or multicol container).
• Overflow Alignment — How alignment behaves when content overflows the container (safe vs. unsafe).

Action Items / Next Steps

• Practice using different justify-content values in flex and grid layouts.
• Experiment with safe and unsafe to see overflow alignment in action.
• Review related properties: align-content, flex-grow, and grid-template-columns.