DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Move yoga docs into docs folder on master branch

Browse Source 
Summary: Move yoga docs into master branch so that pull requests are able to include doc updates as part of other changes.

Reviewed By: JoelMarcey

Differential Revision: D4365700

fbshipit-source-id: 2f46a88974104c454c00bcdf1257abb5c4075a68
This commit is contained in:
Emil Sjolander
2016-12-28 03:57:57 -08:00
committed by Facebook Github Bot
parent cd78291de5
commit f2080e520f
113 changed files with 5020 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/_docs/api/c.md Normal file
View File

@@ -0,0 +1,74 @@
---
docid: c
title: C
layout: docs
permalink: /docs/api/c/
---
`YGNodeRef` is the main object you will be interfacing with when using Yoga in C. `YGNodeRef` is a pointer to an internal `YGNode` struct.
### Lifecycle
The following functions control the lifecycle of a `YGNodeRef`.
<script src="https://gist.github.com/emilsjolander/99e454d04df4765147f407bde131feca.js"></script>
- `YGNodeReset` will reset a node to its initial state so it can be re-used without needing to re-allocate a new node.
- `YGNodeFreeRecursive` is mostly used for testing and will free not only the node itself but also its children.
### Children
The following functions help manage the children of a node.
<script src="https://gist.github.com/emilsjolander/7e162314294087bb78817c064d345afb.js"></script>
### Style getters & setters
The large part of Yoga's API consists of setters and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
<script src="https://gist.github.com/emilsjolander/74913a3326d952ff5a65dabe5ce4baf8.js"></script>
### Layout results
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `YGNodeCalculateLayout` with the desired width and height or `YGUndefined` to perform the layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
<script src="https://gist.github.com/emilsjolander/7c7c9c61b69daff5b925719065fb0dc9.js"></script>
### Custom measurements
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
- Call `YGNodeMarkDirty` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
> A measure function can only be attached to a leaf node in the hierarchy.
<script src="https://gist.github.com/emilsjolander/73f9118d8bd27f9cb3744c08f1e53a32.js"></script>
### Context
Context is important when integrating Yoga into another layout system. Context allows you to associate another object with a `YGNodeRef`. This context can then be retrieved from a `YGNodeRef` when for example its measure function is called. This is what enables Yoga to rely on the Android and iOS system implementations of text measurement in React Native.
<script src="https://gist.github.com/emilsjolander/c3d23a1b880d59627e959f3447a9511b.js"></script>
### Logging
Yoga will by default log to stdout and stderr. You may however customize this to instead log to your own logger.
<script src="https://gist.github.com/emilsjolander/b538718ffd7a55efc80845468e0f063e.js"></script>
### Experiments
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
<script src="https://gist.github.com/emilsjolander/002516a55e10947e4bdcf5484eee8745.js"></script>
### Custom allocators
You may want to swap out the allocator used in Yoga. These functions allow that.
<script src="https://gist.github.com/emilsjolander/f45053d4f09a9faaf94a8fc071f0224f.js"></script>
### Printing
Yoga has some hooks to print debug information while calculating layout. With the printing APIs you can add additional information to a node when it is printed.
<script src="https://gist.github.com/emilsjolander/c9fbaba914d699ecc91841f4f5515f20.js"></script>

53
docs/_docs/api/csharp.md Normal file
View File

@@ -0,0 +1,53 @@
---
docid: csharp
title: C#
layout: docs
permalink: /docs/api/csharp/
---
`YogaNode` is the main object you will be interfacing with when using Yoga in .NET. `YogaNode` is a thin [P/Invoke](https://msdn.microsoft.com/en-us/library/aa446536.aspx) wrapper around the core Yoga library.
### Lifecycle
Create a `YogaNode` via its default constructor or the static `Create()` builder method and use `Reset` if you want to pool and re-use nodes. The native memory of a `YogaNode` will automatically be freed when the node is garbage collected.
<script src="https://gist.github.com/emilsjolander/ce73212ee5fdb543d463822c3dd172b4.js"></script>
### Children
The following methods help manage the children of a node.
<script src="https://gist.github.com/emilsjolander/2b0ea738d3c24644fa98910b276620e4.js"></script>
### Style getters & setters
The large part of Yoga's API consists of properties, setters, and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
<script src="https://gist.github.com/emilsjolander/a84208768e0006b8421a322c40f98539.js"></script>
### Layout results
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `CalculateLayout()` perform layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
<script src="https://gist.github.com/emilsjolander/b50acf9fc0877affeb0fc3e55b5c6b4c.js"></script>
### Custom measurements
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
- Call `MarkDirty()` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
> A measure function can only be attached to a leaf node in the hierarchy.
<script src="https://gist.github.com/emilsjolander/57178307f515e5ea1ccfbedc05df429b.js"></script>
### Data
Data is important when integrating Yoga into another layout system. Data allows you to associate another object with a `YogaNode`. This data can then be retrieved from a `YogaNode` when for example its measure function is called. This is what enables Yoga to rely on the Android system implementations of text measurement in React Native.
<script src="https://gist.github.com/emilsjolander/c099f826623d70fd6bf7dece14e76700.js"></script>
### Experiments
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
<script src="https://gist.github.com/emilsjolander/97b2500918687826cdfe9429638f2d57.js"></script>

59
docs/_docs/api/java.md Normal file
View File

@@ -0,0 +1,59 @@
---
docid: java
title: Java
layout: docs
permalink: /docs/api/java/
---
`YogaNode` is the main object you will be interfacing with when using Yoga in Java. `YogaNode` is a thin [JNI](https://en.wikipedia.org/wiki/Java_Native_Interface) wrapper around the core Yoga library.
### Lifecycle
Create a `YogaNode` via its default constructor and use `reset` if you want to pool and re-use nodes. The native memory of a `YogaNode` will automatically be freed when the node is garbage collected.
<script src="https://gist.github.com/emilsjolander/8775de8c778eb99a05a38e8257f0b4a7.js"></script>
### Children
The following methods help manage the children of a node.
<script src="https://gist.github.com/emilsjolander/5d1c64d8d3be7f7942435c4f5bec45a5.js"></script>
### Style getters & setters
The large part of Yoga's API consists of setters and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
<script src="https://gist.github.com/emilsjolander/f94ca2aa69441a3060a7c9f5126f202f.js"></script>
### Layout results
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `calculateLayout()` perform layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
<script src="https://gist.github.com/emilsjolander/613a80ae11abce423a4806521e1e315b.js"></script>
### Custom measurements
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
- Call `dirty()` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
> A measure function can only be attached to a leaf node in the hierarchy.
<script src="https://gist.github.com/emilsjolander/70fd958b87647abbba604956709a9026.js"></script>
### Data
Data is important when integrating Yoga into another layout system. Data allows you to associate another object with a `YogaNode`. This data can then be retrieved from a `YogaNode` when for example its measure function is called. This is what enables Yoga to rely on the Android system implementations of text measurement in React Native.
<script src="https://gist.github.com/emilsjolander/3f10f3fa91120960b71783780f528973.js"></script>
### Logging
Yoga will by default log to stdout and stderr (or logcat on Android). You may however customize this to instead log to your own logger.
<script src="https://gist.github.com/emilsjolander/6d012f5d48be0e98b7f9c2225c358f6e.js"></script>
### Experiments
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
<script src="https://gist.github.com/emilsjolander/97b2500918687826cdfe9429638f2d57.js"></script>

38
docs/_docs/api/objc.md Normal file
View File

@@ -0,0 +1,38 @@
---
docid: objc
title: Objective-C
layout: docs
permalink: /docs/api/objc/
---
> The Objective-C API is very new and still in rapid development. Please use it and [report issues, bugs or feedback](https://github.com/facebook/yoga/issues). We hope to stabilize the API over the next couple weeks / months.
Yoga for Objective-C is implemented as a [category](https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/Category.html) on [UIView](https://developer.apple.com/reference/uikit/uiview). We try to rely on the existing `UIView` properties and initializers where possible, making the Yoga API smaller for Objective-C than for other languages.
### Lifecycle
As with any `UIView` instantiate it using `-(instancetype)initWithFrame:(CGRect)frame`. With Yoga for Objective-C the frame is actually how you set the width and the height of the Yoga node, just like any other `UIView`.
Because Yoga is implemented as a category we need some way to mark the view as using Yoga as you might not want Yoga to control layout of your whole app, this is especially important if you are migrating an existing app to use Yoga. The property decides during layout/sizing whether or not `yg_*` properties should be applied. Defaults to `NO`.
<script src="https://gist.github.com/emilsjolander/b95467f51b945e906d39b66e44999806.js"></script>
### Children
Yoga relies on `UIView` subviews to build up its internal layout tree. However using properties such as `yg_includeInLayout` a View can exclude itself from layout. Therefor we provide the following method to query the number of children which are laid out using Yoga.
<script src="https://gist.github.com/emilsjolander/253d69b12bef2ee1ec899ace81b768a6.js"></script>
### Style setters
The large part of Yoga's API consists of setters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
<script src="https://gist.github.com/emilsjolander/e7c7732b9465173335d2e019a6bc5941.js"></script>
### Layout
- `yg_includeInLayout` decides if we should include this view when calculating layout. Defaults to `YES`.
- `yg_intrinsicSize` returns the size of the view if no constraints were given. This is equivalent to calling `[view sizeThatFits:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX)]`.
- `yg_applyLayout` performs layout calculation and update the frames of the views in the hierarchy with the results.
- `yg_resolvedDirection` returns the resolved layout direction of this view. Either `YGDirectionRTL` or `YGDirectionLTR`.
<script src="https://gist.github.com/emilsjolander/437661e872c1f9106b728419d5ea49e9.js"></script>

38
docs/_docs/flexbox/absolute-position.md Normal file
View File

@@ -0,0 +1,38 @@
---
docid: absolute-position
title: Absolute positioning
layout: docs
permalink: /docs/absolute-position/
---
The `Position` property tells Flexbox how you want your item to be positioned within its parent. There are 2 options:
* `Relative` (default)
* `Absolute`
An item marked with `Position = Absolute` is positioned absolutely in regards to its parent. This is done through 6 properties:
* `Left` - controls the distance a child's left edge is from the parent's left edge
* `Top` - controls the distance a child's top edge is from the parent's top edge
* `Right` - controls the distance a child's right edge is from the parent's right edge
* `Bottom` - controls the distance a child's bottom edge is from the parent's bottom edge
* `Start` - controls the distance a child's start edge is from the parent's start edge
* `End` - controls the distance a child's end edge is from the parent's end edge
Using these options you can control the size and position of an absolute item within its parent. Because absolutely positioned children don't effect their siblings layout `Position = Absolute` can be used to create overlays and stack children in the Z axis.
#### Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; left: 0px; top: 0px; position: absolute;"></div>
</div>
</div>
#### Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; left: 10px; top: 10px; bottom: 10px; right: 10px; position: absolute;"></div>
</div>
</div>

92
docs/_docs/flexbox/alignment.md Normal file
View File

@@ -0,0 +1,92 @@
---
docid: alignment
title: Alignment
layout: docs
permalink: /docs/alignment/
---
### AlignItems
The `AlignItems` property describes how to align children along the cross axis of their container. `AlignItems` is very similar to `JustifyContent` but instead of applying to the main axis, it applies to the cross axis. There are 4 options for `AlignItems`:
* `Stretch` (default)
* `FlexStart`
* `FlexEnd`
* `Center`
The only non-obvious option of the four is `Stretch`. With `AlignItems = Stretch` you instruct children to match the size of their container in the cross axis.
#### AlignItems = Stretch
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px;">
<div class="yoga" style="background-color: #303846; width: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; "></div>
</div>
</div>
#### AlignItems = FlexStart
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-start;">
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
</div>
</div>
#### AlignItems = FlexEnd
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-end;">
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
</div>
</div>
#### AlignItems = Center
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: center;">
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
</div>
</div>
### AlignSelf
The `AlignSelf` property has the same options and effect as `AlignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent.
This property overrides any option set by the parent via the `AlignItems` property.
#### AlignItems = FlexEnd; AlignSelf = FlexStart;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-end;">
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; align-self: flex-start;"></div>
</div>
</div>
### AlignContent
The `AlignContent` property is used to control how multiple lines of content are aligned within a container which uses `FlexWrap = wrap`. There are 6 options:
* `FlexStart` (default)
* `FlexEnd`
* `Center`
* `Stretch`
* `SpaceBetween`
* `SpaceAround`
#### AlignContent = FlexEnd
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px; flex-wrap: wrap; height: 300px; align-content: flex-end;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>

47
docs/_docs/flexbox/flex-direction.md Normal file
View File

@@ -0,0 +1,47 @@
---
docid: flex-direction
title: Flex direction
layout: docs
permalink: /docs/flex-direction/
---
The `FlexDirection` property controls the direction in which children are laid out. There are 4 options, of which 2 are commonly used:
* `Column` (default)
* `Row`
* `ColumnReverse`
* `RowReverse`
The `Column` option stacks children horizontally from top to bottom, and the `Row` option stacks children from left to right. The `Reverse` variants of the options reverse the order. If your layout supports right-to-left direction, Yoga will automatically toggle between `Row` and `RowReverse` as necessary.
`FlexDirection` introduces another important aspect of Flexbox, the main and cross axes. This is important as other properties will reference which axis they operate on. Simply put, the main axis follows the `FlexDirection` and the cross axis crosses the main axis at a 90 degree angle.
#### FlexDirection = Row
In this example the main axis goes from the left to the right. The cross axis goes from the top to the bottom.
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>
#### FlexDirection = Column
In this example the main axis goes from the top to the bottom. The cross axis goes from the left to the right.
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>

39
docs/_docs/flexbox/flex-wrap.md Normal file
View File

@@ -0,0 +1,39 @@
---
docid: flex-wrap
title: Flex wrap
layout: docs
permalink: /docs/flex-wrap/
---
The `FlexWrap` property is set on containers and controls what happens when children overflow the size of the container along the main axis. There are 2 options:
* `Nowrap` (default)
* `Wrap`
If a container specifies `FlexWrap = Wrap` then its children will wrap to the next line instead of overflowing. The next line will have the same `FlexDirection` as the first line and will appear next to the first line along the cross axis -- below it if using `FlexDirection = Column` and to the right if using `FlexDirection = Row`.
#### FlexWrap = Nowrap
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>
#### FlexWrap = Wrap
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px; flex-wrap: wrap;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>

100
docs/_docs/flexbox/flex.md Normal file
View File

@@ -0,0 +1,100 @@
---
docid: flex
title: Flex
layout: docs
permalink: /docs/flex/
---
### FlexGrow
The `FlexGrow` property describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the `FlexGrow` values specified by its children.
`FlexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the child's `FlexGrow` value.
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1;">
<span><span>FlexGrow = 1</span></span>
</div>
</div>
</div>
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; flex-grow: 1;">
<span><span>FlexGrow = 1</span></span>
</div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1;">
<span><span>FlexGrow = 1</span></span>
</div>
</div>
</div>
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; flex-grow: 1;">
<span><span>FlexGrow = 1</span></span>
</div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 2;">
<span><span>FlexGrow = 2</span></span>
</div>
</div>
</div>
### FlexShrink
The `FlexShrink` property describes how to shrink children along the main axis in the case that the total size of the children overflow the size of the container on the main axis.
`FlexShrink` is very similar to `FlexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
`FlexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the child's `FlexShrink` value.
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px;"></div>
</div>
</div>
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 1;">
<span><span>FlexShrink = 1</span></span>
</div>
</div>
</div>
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px; flex-shrink: 1;">
<span><span>FlexShrink = 1</span></span>
</div>
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 1;">
<span><span>FlexShrink = 1</span></span>
</div>
</div>
</div>
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px; flex-shrink: 1;">
<span><span>FlexShrink = 1</span></span>
</div>
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 2;">
<span><span>FlexShrink = 2</span></span>
</div>
</div>
</div>
### FlexBasis
The `FlexBasis` property is an axis-independent way of providing the default size of an item on the main axis. Setting the `FlexBasis` of a child is similar to setting the `Width` of that child if its parent is a container with `FlexDirection = row` or setting the `Height` of a child if its parent is a container with `FlexDirection = column`. The `FlexBasis` of an item is the default size of that item, the size of the item before any `FlexGrow` and `FlexShrink` calculations are performed.

61
docs/_docs/flexbox/justify-content.md Normal file
View File

@@ -0,0 +1,61 @@
---
docid: justify-content
title: Justify content
layout: docs
permalink: /docs/justify-content/
---
The `JustifyContent` property describes how to align children within the main axis of a container. For example, you can use this property to center a child horizontally within a container with `FlexDirection = Row` or vertically within a container with `FlexDirection = Column`.
`JustifyContent` accepts 1 of the following 5 options:
* `FlexStart` (default)
* `FlexEnd`
* `Center`
* `SpaceBetween`
* `SpaceAround`
#### JustifyContent = FlexStart
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>
#### JustifyContent = FlexEnd
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: flex-end;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>
#### JustifyContent = Center
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: center;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>
#### JustifyContent = SpaceBetween
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: space-between;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>
#### JustifyContent = SpaceAround
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: space-around;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
</div>
</div>

58
docs/_docs/flexbox/margin-padding-border.md Normal file
View File

@@ -0,0 +1,58 @@
---
docid: margin-padding-border
title: Margin, Padding, Border
layout: docs
permalink: /docs/margin-padding-border/
---
`Margin`, `Padding` are similar but have some important differences. By applying `Margin` to an item you specify the offset a certain edge of the item should have from it's closest sibling or parent. With `Padding` on the other hand you specify the offset children should have from a certain edge on the parent. `Border` behaves nearly identically to `Padding` and is only separate from `Padding` to make it easier to implement border effect such as color. In the below illustrations the green box is a child of the dark gray box.
#### MarginStart = 50;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; flex: 1; margin-left: 50px;">
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
</div>
</div>
</div>
#### MarginEnd = 50;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; flex: 1; margin-right: 50px;">
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
</div>
</div>
</div>
#### MarginAll = 50;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; flex: 1; margin: 50px;">
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
</div>
</div>
</div>
#### PaddingAll = 50;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; flex: 1; padding: 50px;">
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
</div>
</div>
</div>
#### BorderWidth = 50;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; flex: 1; border-width: 50px; border-color: transparent;">
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
</div>
</div>
</div>

34
docs/_docs/flexbox/minmaxdimen.md Normal file
View File

@@ -0,0 +1,34 @@
---
docid: min-max-dimen
title: Min & Max dimensions
layout: docs
permalink: /docs/min-max-dimen/
---
Using `MinWidth`, `MinHeight`, `MaxWidth`, and `MaxHeight` gives you increased control over the final size of items in a layout. By mixing these properties with `FlexGrow`, `FlexShrink`, and `AlignItems = Stretch`, you are able to have items with dynamic size within a range which you control.
An example of when `Max` properties can be useful is if you are using `AlignItems = Stretch` but your know that your item won't look good after it increases past a certain point. In this case, your item will stretch to the size of its parent or until it is as big as specified in the `Max` property.
Same goes for the `Min` properties when using `FlexShrink`. For example, you may want children of a container to shrink to fit on one row, but if you specify a minimum width, they will break to the next line after a certain point (if you are using `FlexWrap = Wrap`).
Another case where `Min` and `Max` dimension constraints are useful is when using `AspectRatio`.
#### FlexGrow = 1; MaxWidth = 200;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1; max-width: 200px;">
<span><span>FlexGrow = 1</span></span>
</div>
</div>
</div>
#### AlignItems = Stretch; MaxHeight: 100;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px;">
<div class="yoga" style="background-color: #303846; width: 50px; margin-right: 20px;"></div>
<div class="yoga" style="background-color: #303846; width: 50px; max-height: 100px;"></div>
</div>
</div>

28
docs/_docs/getting-started.md Normal file
View File

@@ -0,0 +1,28 @@
---
docid: getting-started
title: Getting Started
layout: docs
permalink: /docs/getting-started/
---
## Installation
Installation of Yoga is currently a manual process. We have plans on bringing Yoga to the many available package management systems (e.g., [Yarn](https://yarnpkg.com/), [Gradle](https://gradle.org/), [Cocoapods](https://cocoapods.org/)), but we do not have a target date at this time. We would greatly appreciate [community contributions here](https://github.com/facebook/yoga/pulls).
### Getting the Code
For now we recommend including Yoga as a [git submodule](https://git-scm.com/docs/git-submodule) in your project. Once done, you can either build Yoga using Buck (detailed [below](#building-with-buck)) or integrate it into your existing build system by including the C library from the [root `yoga` directory](https://github.com/facebook/yoga/tree/master/yoga) as well as the [language bindings](https://github.com/facebook/yoga) (e.g., Java, C#) you wish to use.
### Running the Example
Yoga ships with an [iOS example](https://github.com/facebook/yoga/tree/master/YogaKit/YogaKitSample). To get it running:
<script src="https://gist.github.com/emilsjolander/903b16185b24c957acc4cd250c6e73d9.js"></script>
### Building with Buck
Yoga uses [Buck](https://buckbuild.com/) as its build system. Buck is not required for using Yoga, but, if you already use Buck, then integrating Yoga is very simple.
If you are using Buck all you need to do is reference the language bindings you want to use in your `BUCK` file.
<script src="https://gist.github.com/emilsjolander/895b4ec79425882b8d4676b6545d6943.js"></script>

42
docs/_docs/learn-more.md Normal file
View File

@@ -0,0 +1,42 @@
---
docid: learn-more
title: Learn More
layout: docs
permalink: /docs/learn-more/
---
Yoga is an open-source, cross-platform layout library that implements Flexbox. Yoga's focus is on creating an expressive ***layout*** library, not implementing all of CSS. Therefore, there are no plans to include support for tables, floats, or similar CSS concepts. Yoga also does not support styling properties that have no impact on layout, such as color or background properties.
### Yoga vs Flexbox
Yoga aims to be compatible with Flexbox according to the [w3 specification](https://www.w3.org/TR/css3-flexbox). However, Yoga was not developed to strictly adhere to the specification; thus, there are aspects where Yoga differs.
#### Default values
Yoga has chosen to change the default values of some properties to better fit mobile layout use cases. The following CSS block describes the differences in default values from the [Flexbox w3 specification](https://www.w3.org/TR/css3-flexbox).
<script src="https://gist.github.com/emilsjolander/f9b3981cab44c51afa9ac446b8fdb60c.js"></script>
We have set up a [JSFiddle](https://jsfiddle.net/emilsjolander/jckmwztt/) so you can see these default values in action.
#### Right-to-Left
We believe that Right-to-Left (RTL) should be a first class citizen when it comes to layout. Therefore, Yoga implements non-standard RTL support for margin, padding, border, and position properties. This enables specifying these properties as `start` instead of `left` and `end` instead of `right`.
<div class="pluginWrapper buttonWrapper">
<a
class="button"
href="/yoga/docs/rtl/"
>Learn More about RTL</a>
</div>
#### Yoga-specific properties
The goal of Yoga is to be a library which makes layout easy. Of course, implementing Flexbox, a common and well-liked system, helps meet this goal. However, there are areas where we think Yoga can evolve beyond Flexbox and provide developers with tools not included in the [Flexbox w3 specification](https://www.w3.org/TR/css3-flexbox). Currently Yoga has added one such property, `AspectRatio`, to solve a common problem we saw in many UIs.
<div class="pluginWrapper buttonWrapper">
<a
class="button"
href="/yoga/docs/aspect-ratio/"
>Learn More about Aspect Ratio</a>
</div>

47
docs/_docs/yoga/aspect-ratio.md Normal file
View File

@@ -0,0 +1,47 @@
---
docid: aspect-ratio
title: Aspect ratio
layout: docs
permalink: /docs/aspect-ratio/
---
`AspectRatio` is a property introduced by Yoga. `AspectRatio` solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to videos, images, and other media types. `AspectRatio` accepts any floating point value > 0, the default is undefined. `AspectRatio` can apply to either the width or the height of an item, it depends on which dimension is fixed. `AspectRatio` Also respects the `Min` and `Max` dimensions of an item.
- If an item has a `Width` set then `AspectRatio` controls the item's height.
- If an item has a `Height` set then `AspectRatio` controls the item's width.
- If an item has a `FlexBasis` set then `AspectRatio` controls the item's cross axis dimension.
- If an item's alignment is `Stretch` and its main axis is undefined then `AspectRatio` controls the item's main axis dimension.
- If an item has `FlexGrow` or `FlexShrink` set then `AspectRatio` controls the item's cross axis dimension if it is undefined.
- If both dimensions of an item are fixed then `AspectRatio` is ignored.
#### Width = 100; AspectRatio = 2;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; width: 100px; height: 200px;"></div>
</div>
</div>
#### Width = 100; AspectRatio = 0.5;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; width: 100px; height: 50px;"></div>
</div>
</div>
#### FlexDirection = Row; FlexGrow = 1; AspectRatio = 0.5;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px; flex-direction: row;">
<div class="yoga" style="background-color: #303846; flex-grow: 1; height: 150px;"></div>
</div>
</div>
#### FlexDirection = Row; AlignItems = Stretch; AspectRatio = 0.5;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px; flex-direction: row;">
<div class="yoga" style="background-color: #303846; width: 150px;"></div>
</div>
</div>

15
docs/_docs/yoga/rtl.md Normal file
View File

@@ -0,0 +1,15 @@
---
docid: rtl
title: RTL
layout: docs
permalink: /docs/rtl/
---
The web has limited support for Right-to-Left (RTL) layouts. It does a pretty good job when it comes to text alignment and text rendering, but lacks the features needed to build fully RTL compatible UIs. Therefore, Yoga has adopted `Start` and `End` values for `Margin`, `Padding`, `Border`, and `Position` properties.
## Direction
With `Start` and `End`, you can specify these properties in your UI without having to think about whether your item will show up on the left or the right side of the screen (depending on the person's language setting). Yoga automatically handles this for you.
The `Direction` property controls this behavior. `Direction` defaults to `Inherit` on all nodes except the root which defaults to `LTR`. It is up to you to detect the user's preferred direction (most platforms have a standard way of doing this) and setting this direction on the root of your layout tree.