If you have reached for justify-self inside a flex container and watched nothing happen, that is expected. The property does not apply there. What has changed is that it is no longer only a Grid property.
justify-self aligns a single element along the inline axis, and it overrides whatever justify-items value the parent container set. When a container’s rules suit every child except one, this is how you exempt that one child.
justify-self inside a grid container
In a grid, the parent decides how every child lines up. That holds until one item needs different treatment. Say you have a three column grid where the first two items sit centered and the third has to hug the end of its cell.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; /* All items default to center */
}
.item-special {
justify-self: end; /* This specific item moves to the right */
}That is more precise than faking it with margins, and the browser does less work to get there. I have written before about dropping legacy hacks as part of modern CSS features.
Block layouts and the newer spec
The CSS Box Alignment Module Level 3 extends justify-self to block-level boxes. Until that landed, the options for this were margin: auto or text-align.
In a block layout, justify-self positions an element inside its containing block. The catch is that block elements stretch by default. If you have not set a width or an aspect ratio, the item already fills the space, so nothing looks like it moved.
Absolute positioning: the inset gotcha
Plenty of developers put justify-self on an absolutely positioned element and get no movement at all. I lost two hours to a centering bug that way before working out the Inset-Modified Containing Block (IMCB) was the thing holding it back.
An absolute element needs somewhere to move before alignment means anything. By default, its IMCB is exactly as big as the item itself. Set inset: 0, or specific top, bottom, left and right values, and the property finally has space to work with.
.modal-item {
position: absolute;
inset: 0; /* Critical: Defines the space for alignment */
justify-self: center;
align-self: center;
width: 300px;
height: 200px;
}Safe vs. unsafe alignment
With dynamic content, justify-self takes the safe and unsafe keywords, and the difference matters for accessibility. If an element ends up bigger than its container, unsafe center centers it anyway and clips the left and right edges, so content is lost. safe center centers it when there is room and aligns it to the start when there is not, which at least leaves the content reachable by scrolling.
The official MDN documentation goes deeper into how the browser calculates these positions.
If alignment bugs like this are eating your dev hours, I can take them off your hands. I have been wrestling with WordPress since the 4.x days.
Where justify-self actually helps
Flexbox is never going to pick up justify-self, so stop aiming it there. Grid is where it gives you precise per item control, absolute layouts are where it replaces centering math, and block layout support is still growing. The payoff is less CSS to maintain.
