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)
- Investigate using an IDL for binding generation HOT 1
- Use of bitwise '|' with boolean operands | XCode 14.3 fails builds using react-native Yoga - RN versions before 0.69 are no longer being supported. If there is a need to use an old version of RN/Yoga, an older version of XCode is required. HOT 2
- YogaNode Finalization is not thread safe HOT 14
- Building for iOS Simulator for unsupported Swift architecture HOT 2
- CMP0135 requires higher version of CMake HOT 1
- Make `aspectRatio` property spec compliant HOT 1
- Add text measuring support to the test generator HOT 3
- Split core Flexbox algorithm implementation into a separate file HOT 1
- Add `YGMeasureModeMinContent` and support for computing min/max content sizes of nodes
- Container `min-height` produces incorrect size when `flex-wrap` is enabled HOT 11
- What to do next after YogaKit is deprecated HOT 2
- Yoga 2.0.0 Beta Release Feedback HOT 8
- Yoga npm package version 2.0.0-beta.1 doesn't work with Webpack HOT 5
- Typescript and intellisense issues with Yoga npm package version 2.0.0-beta.1 HOT 4
- flex: 1 does not set flexGrow: 1 HOT 7
- fix Yoga.cpp for Xcode14.3 HOT 1
- Evaluate Profile-Guided Optimization (PGO) on Yoga
- YGNodeClone memory leak HOT 1
- Build Yoga 2.0 as a shared library (partial implementation). HOT 13
- Typo:React Native Development HOT 1
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.