Box Alignment

Intermediate

CSS Box Alignment defines the shared rules for aligning boxes inside their layout containers. The model is used by block layout, table layout, flex layout, and grid layout. This lesson owns the shared alignment concepts; Flexbox and Grid own how those concepts interact with their respective layout algorithms.

The goal is not to memorize a list of alignment properties. Instead, learn the axes, the alignment subject and container, the different alignment modes, and the conditions under which free space exists to distribute. Once those ideas are clear, the same model can be recognized across several CSS layout systems.

Alignment starts with a container, an axis, and an alignment subject

An alignment subject is the box being positioned by an alignment property. The alignment container is the box whose alignment area supplies the space. Which boxes become subjects depends on the layout model. This is why the same property can have different visible effects in flex and grid layout without changing the shared alignment vocabulary.

?

The main axis and cross axis are layout-model concepts

Box Alignment uses logical axis concepts rather than assuming that horizontal means main or vertical means cross. A layout model establishes the axes, and alignment properties operate on the axis to which they apply. Flexbox establishes its main and cross axes; Grid has rows and columns that can be aligned within its own two-dimensional model.

This distinction prevents a common mistake: treating `justify-*` or `align-*` as permanently meaning horizontal or vertical. Their effect depends on the layout context and the axis being aligned.

?

Self-alignment and content-distribution are different jobs

Self-alignment positions an individual alignment subject within its alignment container. Content-distribution distributes a set of subjects or tracks when the container has extra space. Box Alignment keeps these concepts separate because they answer different questions: “Where does this subject go?” versus “How is the available space distributed among the content?”

?

The justify-content family distributes content along a layout axis

`justify-content` controls alignment of the contents of a container when there is distributable space in the relevant axis. Its values include positional modes such as `start`, `end`, `center`, and `flex-start`/`flex-end` in flex contexts, as well as distribution modes such as `space-between`, `space-around`, `space-evenly`, and `stretch` where supported by the layout model.

The important boundary is that Box Alignment defines the shared meanings and fallback behavior, while the layout module determines what content exists to distribute and whether distributable space is actually available.

?

The align-items family establishes a default for self-alignment

`align-items` specifies the default self-alignment for the alignment subjects of a container. Individual subjects can override that default with `align-self`. In Flexbox, this commonly controls the cross-axis position of flex items; in Grid, it participates in alignment within the relevant grid areas.

?

Alignment properties do not change the box model

Alignment can move or distribute boxes within available space, but it does not redefine padding, borders, or margins. Those remain Box Model concepts. Likewise, alignment does not invent additional available size; Sizing and the active layout model determine the relevant dimensions.

?

Start and end are logical alignment positions

`start` and `end` are logical positional values. They refer to the start and end sides of the relevant axis rather than hard-coding physical left and right. This lets alignment cooperate with writing modes and direction.

?

Safe and unsafe alignment describe overflow behavior

The `safe` and `unsafe` modifiers qualify certain alignment choices. A safe alignment is allowed to adjust toward a position that avoids data loss when the preferred alignment would cause overflow; unsafe alignment preserves the requested alignment even when that can cause overflow. These keywords affect alignment behavior, not the general overflow model.

?

Stretch is not the same as centering

`stretch` uses available alignment-space to enlarge the alignment subject when the layout model and subject’s size allow stretching. It is different from `center`, which positions the subject without turning the remaining alignment space into extra subject size.

?

The gap family creates gutters between adjacent content

`row-gap`, `column-gap`, and `gap` define gutters between adjacent rows and columns of content in layout models that support them. They are part of the shared alignment/gap model. A gap is not a margin on the children and does not become part of each child’s box.

?

The place-* shorthands combine alignment properties

`place-content` combines `align-content` and `justify-content`; `place-items` combines `align-items` and `justify-items`; and `place-self` combines `align-self` and `justify-self`. A shorthand does not create a new alignment model. It sets the corresponding longhands according to its grammar and defaults.

?

Alignment of multiple lines is different from aligning one subject

`align-content` distributes or positions a set of alignment content, such as flex lines or grid tracks, within the container. It is therefore different from `align-items`, which establishes the default self-alignment of individual subjects. In a single-line flex container, there may be no collection of multiple lines for `align-content` to distribute.

?

Fallback and layout-context boundaries matter

Not every alignment value has an identical effect in every layout model. Some values have layout-specific applicability or fallback behavior. The shared specification defines the common vocabulary and rules, while the layout module determines the available subjects, tracks, lines, and spaces.

This is why Foxipa will not teach Box Alignment as a giant catalog of isolated property/value combinations. Each future layout lesson will explain the small amount of layout-specific behavior it owns and link back to this shared model.

?

Box Alignment is shared; layout algorithms remain separate

Box Alignment does not own Flexbox sizing, Grid track sizing, normal-flow layout, or the general box model. Flexbox owns flex base sizes and free-space resolution. Grid owns track sizing and placement. Flow owns normal-flow participation. Sizing owns general intrinsic and extrinsic sizing concepts. Box Model owns padding, borders, and margins.

This ownership boundary is deliberate. It lets a learner understand alignment once without producing nearly identical explanations in Flexbox, Grid, tables, and block layout.

?

Debug alignment by identifying the owner first

When alignment looks wrong, first identify the layout model and axis. Then ask whether the issue is alignment space, sizing, box spacing, overflow, or the layout algorithm itself. This prevents changing unrelated properties until something appears to work.

?

Normative ownership and status

Primary authority: W3C CSS Box Alignment Module Level 3. The current W3C publication is a Working Draft dated 4 September 2026. It defines alignment features for block, table, flex, and grid layout. This lesson treats developing or layout-specific behavior as such rather than presenting every draft feature as equally stable.

Flexbox-specific behavior remains in CSS Flexible Box Layout Module Level 1. Grid-specific behavior remains in CSS Grid Layout. General sizing remains in CSS Sizing, and spacing remains in CSS Box Model. Those specifications are referenced for ownership boundaries rather than duplicated here.

What you should now be able to explain

You should be able to distinguish an alignment subject from its alignment container, distinguish self-alignment from content distribution, reason about logical start/end positions, explain the role of safe alignment and gaps, and identify when a surprising result belongs to Box Alignment versus Flexbox, Grid, Sizing, Box Model, Overflow, Writing Modes, or Flow.