Centering

[mrjjwright]

With flexbox, what is the way to create a header layout like found in a navigation bar? E.g, [< Navigation Title ], where inside the container there is a back button followed by a centered title. I assume that the container would be set to align:items:center and justify-content: center and the back arrow would be set to align-self: flex-start. This is not working for me, I have to make the back button position set to absolute to get it work. Is there no way to make a single item always align to it's container center despite the size of it's siblings?

[vjeux]

Yeah, this is not something that flexbox is good at.

One thing you can do is

<div>
  Back
  <div style={{position: 'absolute', left: 0, right: 0, textAlign: 'center'}}>
    Title
  </div>
</div>

but, in case it's overlapping, it's going to be really ugly.

[mrjjwright]

Thanks @vjeux. My idealism with flexbox met it's first wake up call but no biggie. I am building an iPhone app that let's user create arbitrary grid like layouts and flex box is still a highly intuitive basis for this tool. It's less verbose than autolayout. I have a couple of choices however to handle cases like this and others not supported in flexbox, e.g. constrain the width and height of an item to be the same.

My first idea is to use default css flexbox positioning and then allow users to specify one or more rules that will be applied in order to an item, such as vertical centering the item in it's superview. I would apply these manually after css flexbox computes it's layout.

The second idea is pretty much like the first. Let css flex box compute it's layout and apply rules afterwards in another pass. Instead of applying rules in a simple order I could open up the whole auto layout engine to make a pass over autolayout constraints with priority higher than the css flex box constraints.

My idea is to use idea #1 because I think the performance will be better and there will be less weird edge cases. I want users to quickly create layouts without too much fuss. Any ideas are welcome, but closing this for now.

[vjeux]

Yeah, flexbox is not perfect. And, I don't think any declarative layout can be.

What I really want to research is the ability to let the developer write arbitrary layout (using code) when he wants to. For example, you can have your entire application using flexbox for the layout, but for the navigation bar component, write code that does it.

If you are used to iOS, basically let the developer write sizeThatFits function. If you look at css-layout, the API for doing that is measure.

I don't think that we need another high level layout engine like a constraint layout to solve the navigation problem. I would much rather have the developer write custom code for it :)

[mrjjwright]

Actually I just solved my most pressing layout use cases by adding some pre and post hooks on the css layout calls. Pre hook e.g: constrain width to equal height, post-hook e.g: vertically align view in superview. I like this approach over auto layout constraints. If you think of how a designer works visually, they basically lays things out in a rough grid and then aligns things, so it makes good sense. I think almost every important use case could probably be solved that way.

Re measuring, I think the approach you mention sounds quite easy. That way you don’t have to call flex-box layout multiple times at the different places in the view hierarchy where css flex box is used, but can stub out to measure functionality provided by the developer as needed. I assume this is something akin to how React Native measures text.

On Mar 8, 2015, at 4:33 PM, Christopher Chedeau notifications@github.com wrote:

Yeah, flexbox is not perfect. And, I don't think any declarative layout can be.

What I really want to research is the ability to let the developer write arbitrary layout (using code) when he wants to. For example, you can have your entire application using flexbox for the layout, but for the navigation bar component, write code that does it.

If you are used to iOS, basically let the developer write sizeThatFits function. If you look at css-layout, the API for doing that is measure.

I don't think that we need another high level layout engine like a constraint layout to solve the navigation problem. I would much rather have the developer write custom code for it :)

—
Reply to this email directly or view it on GitHub #58 (comment).

[jasorod]

One trick that works fairly nicely with flexbox where you want an element anchored to one side of the flexbox container as well as an element anchored to the center of the container is to add a third "dummy" element and set the justify-content: space-between. That will force the left and right elements to "hug" the edges of the container, and the center element to remain in the center.