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

Clean up certain style choices on website's example documentation (#1616)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1616

This is based on a few comments earlier in the stack and my own discretion on what should change. But I went through all of the examples and changed the following:

* Only add code tick marks in a few cases where it would make sense. Things like `start` and `end`, `undefined` as a value, etc. There ends up not being that many after this. Previously, any property or value was tick marked even if it was more of a concept than actual code. **I replaced those cases with a link to their respective documentation as I feel like this keeps the indication that this is a keyword without labeling it as code**.
* Any reference to "element" was changed to "node"
* Capitalize words that follow a colon
* Run code examples through prettier for consistent style

Reviewed By: yungsters

Differential Revision: D54816609

fbshipit-source-id: 20ee925cf46bd1c519cc88bab9327321e926ac56
This commit is contained in:
Joe Vilches
2024-03-13 10:19:30 -07:00
committed by Facebook GitHub Bot
parent f4facf8990
commit 1db7a3ff61
13 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
website-next/docs/styling/flex-basis-grow-shrink.mdx
View File

@@ -6,10 +6,10 @@ import Playground from '@site/src/components/Playground';
# 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
**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](/docs/styling/width-height) of that
child if its parent is a container with a row [flex direction](/docs/styling/flex-direction) or setting the [height](/docs/styling/width-height) of a child
if its parent is a container with a column [flex direction](/docs/styling/flex-direction). 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.
@@ -24,7 +24,7 @@ calculations are performed.
</Node>
</Layout>`} />
**Flex grow**: describes how any space within a container should be distributed
**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.
@@ -43,7 +43,7 @@ A container will distribute any remaining space among its children weighted by t
</Node>
</Layout>`} />
**Flex shrink**: describes how to shrink children along the main axis in the
**Flex shrink**: 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.
flex shrink is very similar to flex grow and can be thought of in the same way if
any overflowing size is considered to be negative remaining space.