Flexbox justify-self property

It is quite difficult to recreate a layout similar to the iOS navigation bar UI on the web without a justify-self property.

Consider the following screenshots from iOS:

The nav UI in the screenshot above can be achieved by setting flex: 1 0 0 to elements at the start and end of the main axis, the middle item would be set to flex: none. However, for this same UI to accommodate the layout logic demonstrated below we need a way for the middle element to be both centered relative to flex container and aware of it’s siblings.

User mark on Stack Overflow created an excellent proposal with diagrams describing how a justify-self property could solve this problem. Below is that proposal wholesale:

In my [belief] when there are multiple items on the axis, the most logical way for justify-self to behave is to align itself to it’s nearest neighbors (or edge) as demonstrated below.

wpSsJ.jpg529×694 40.5 KB

This way you can have an item that is truly centered regardless of the size of the left and right box. When one of the boxes reaches the point of the center box it will simply push it until there is no more space to distribute.

The ease of making awesome layouts are endless, take a look at this “complex” example.

U2ELF.png640×606 46.8 KB

My understanding is that justify-self was previously discussed by the CSSWG and thrown out for being too complex to implement. Perhaps it could be considered again? I’m not aware of any other way to create the UI’s above without resorting to JavaScript measurement.

Thanks for reading!

justify-self is already present (and implemented, at least in Chrome), it’s just specified in the CSS Box Alignment Module rather than the Flexbox spec.

justify-self is supported in CSS Grid Layout at least in Chrome and WebKit (BTW, grid is not shipped yet in any of those browsers).

To achieve something like that you could use a grid with 3 columns (auto 1fr auto). 1st and 3rd columns would adapt to the content and 2nd column would use the available space. Then you can set justify-self: center; to the item in the 2nd. If the items in the 1st and 3rd columns modify their size, the item in the 2nd column would be always properly centered.

You can test the following example in Chrome but remember to enable the experimental flag:

Thanks Stuart! Was not aware of the CSS Box Alignment Module spec. The justify-self described there sounds like it will solve this problem perfectly.

Thanks Rego! I poked around with Chrome’s implementation of justify-self (WebKit does not have one yet) and it looks like it does not correctly position the item relative to the container. Perhaps this is just due to an incomplete implementation but I’ll highlight the issue here.

From your example:

Screen Shot 2015-10-15 at 8.39.10 AM.png1652×146 8.83 KB

Screen Shot 2015-10-15 at 8.39.23 AM.png1648×378 23 KB

Basically when an item has justify-self: center it should remain centered within its parents container until it’s siblings have used up all of the available space between and expand into it.

See the top part of mark’s animated diagram:

Is this worth filing against Chromium or should I just assume their implementation is still a work a progress?

Ok, yeah I was implementing the bottom part of that diagram. Sorry but I don’t think we’ve an easy way to do the top part in grid layout.

Implementation of this property is quite complete, and the behavior you can see in my demo is the expected one. The 2nd column is resized and the item is always centered respecting that column.

About justify-self it should be supported in WebKit nightlies too, but note that grid properties are prefixed there (-webkit-).

Implementation of this property is quite complete

I’m assuming you mean justify-self in Chrome. Do you have a reference for that implementation being complete? If it is complete and correct, I’m misunderstanding the specification.

Thanks!

Yeah, I was talking about justify-self.

I think that expect baseline the rest of things are implemented on Chrome (probably you’ve to use Canary to have the last implementation).

About correctness, maybe there’re some bug don’t really now, but the case in my example seems to be working as expected to me. At least, that’s what I understand from the spec (so the item is centered in the 2nd column, which is changing its size in my example):

The alignment container is the grid cell.

Does anyone know if Chrome Canary is correctly implementing the spec for justify-self?

Spec: http://www.w3.org/TR/css3-align/#justify-self-property

If it is, we are still missing a solution for the problem that started this thread.

Necromancing a thread. Not sure if the spec of display: grid was ready back in 2015. But for anyone coming these days all the way to this thread (linked from StackOverflow) – I believe this https://codepen.io/tomasdev/pen/xxMOopb is what you wanted. Using grid is relatively easy to configure the behavior.