Comments (5)
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.
from yoga.
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.
from yoga.
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 :)
from yoga.
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 [email protected] 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).
from yoga.
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.
from yoga.
Related Issues (20)
- Where is the operation interface?
- Where is the operation interface? HOT 6
- Top Level Await HOT 9
- Support justifyItems and justifySelf HOT 1
- Incorrect computed height and top value with flex shrink 1 and specific floating point values
- Gap moves children views outside containing view HOT 5
- [Yoga 3] Wrong outcome of max-height percentage value HOT 1
- [Yoga 3] Potential RTL paddingStart/paddingEnd bug HOT 4
- absolute percent position of root element is not correct HOT 3
- YGNodeFree does not mark parent as dirty HOT 1
- Measurement of absolute-positioned nodes
- Box percentage width calculation is different from the Web
- get/setDirection() bindings missing from Yoga npm version 3.0.4 HOT 2
- flexBasis+flexShrink+borderWidth result in an wrong value HOT 1
- 3.1.0 BUG: The change in the UILabel text affects the horizontal width calculation!!! HOT 2
- 0 layoutWidth and 0 layoutHeight after repeated layout calculation HOT 3
- [c++] YGNodeCalculateLayout() is not working on iOS/iPad with any optimization -O1, O2, O3, OFast (because of finite-math-only) HOT 4
- Child node size is wrong when layout is measured by parent HOT 2
- [c++]set the fex property 1 to the node with measueFunc , the node width will be 0 HOT 1
- Parent components ignore minHeight when parent's flexDirection is column
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from yoga.