It is quite difficult to recreate a layout similar to the iOS navigation bar UI on the web without a
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.
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.
My understanding is that
Thanks for reading!