Merge branch 'main' into docs/updateDocs

website/contents/contributing/testing.md

@@ -8,7 +8,7 @@ hasPlayground: false
 
 Yoga tries to be as close as possible to chrome in its flexbox behaviour.
 To ensure this most of Yoga's test suite is automatically generateded from
-running the corresponding layout in chrome using a webdriver which then generates 
+running the corresponding layout in chrome using a webdriver which then generates
 C++ test which asserts that Yoga will produce matching outputs for that layout.
 
 ## Running the Test Suite
@@ -34,12 +34,10 @@ Run `gentest/gentest.rb` to generate test code and re-run `buck test //:yoga`
 to validate the behavior. One test case will be generated for every root `div`
 in the input html with the string in the `id` corresponding to the test name.
 
-You may need to install the latest watir gem (`gem install watir`) and
-[ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) to
-run `gentest/gentest.rb` Ruby script.
+You should run `bundle install` in the `gentest` directory to install dependencies for the `gentest/gentest.rb` Ruby script.
 
 ## Manual test
 
 For some aspects of Yoga we cannot generate a test using the test generation
-infrastructure described earlier. For these cases we manually write a test in 
-the `/tests` directory.	
+infrastructure described earlier. For these cases we manually write a test in
+the `/tests` directory.

website/contents/getting-started/react-native.md

@@ -1,5 +1,5 @@
 ---
-path: "https://reactnative.dev/docs/getting-started.html"
+path: "https://reactnative.dev/docs/getting-started"
 title: "React Native"
 redirect: true
 ---

website/contents/getting-started/standalone.md

@@ -27,7 +27,7 @@ $> yarn add yoga-layout
 ```
 
 This is an example on how to use Yoga in JavaScript, for a full API reference,
-have a look at the [flow-type definitions](https://github.com/facebook/yoga/blob/master/javascript/sources/entry-common.js#L123).
+have a look at the [flow-type definitions](https://github.com/facebook/yoga/blob/main/javascript/sources/entry-common.js#L123).
 
 ```js
 import yoga, {Node} from 'yoga-layout';
@@ -36,6 +36,7 @@ const root = Node.create();
 root.setWidth(500);
 root.setHeight(300);
 root.setJustifyContent(yoga.JUSTIFY_CENTER);
+root.setFlexDirection(yoga.FLEX_DIRECTION_ROW);
 
 const node1 = Node.create();
 node1.setWidth(100);

website/contents/properties/flex-direction.md

@@ -8,7 +8,7 @@ hasPlayground: true
 
 Flex direction controls the direction in which children of a node are laid out.
 This is also referred to as the main axis. The main axis is the direction in
-which children are laid out. The cross axis the the axis perpendicular to the
+which children are laid out. The cross axis is the axis perpendicular to the
 main axis, or the axis which wrapping lines are laid out in.
 
 **ROW (DEFAULT)** Align children from left to right. If [wrapping](/docs/flex-wrap) is enabled then

website/contents/properties/flex.md

@@ -6,6 +6,15 @@ hasPlayground: true
 
 ## Flex Basis, Grow, and Shrink
 
+**FLEX BASIS** is an axis-independent way of providing the default size of an item
+along the main axis. Setting the flex basis of a child is similar to setting the `width` of that
+child if its parent is a container with `flex direction: row` or setting the `height` of a child
+if its parent is a container with `flex direction: column`. The flex basis of an item is the
+default size of that item, the size of the item before any flex grow and flex shrink
+calculations are performed.
+
+<controls prop="flexBasis"></controls>
+
 **FLEX GROW** 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 flex grow values specified by its children.
@@ -25,12 +34,3 @@ Flex shrink accepts any floating point value >= 0, with 1 being the default valu
 A container will shrink its children weighted by the child’s flex shrink value.
 
 <controls prop="flexShrink"></controls>
-
-**FLEX BASIS** is an axis-independent way of providing the default size of an item
-along the main axis. Setting the flex basis of a child is similar to setting the `width` of that
-child if its parent is a container with `flex direction: row` or setting the `height` of a child
-if its parent is a container with `flex direction: column`. The flex basis of an item is the
-default size of that item, the size of the item before any flex grow and flex shrink
-calculations are performed.
-
-<controls prop="flexBasis"></controls>