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

Add containing block documentation (#1615)

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

tsia

Reviewed By: yungsters

Differential Revision: D54822992

fbshipit-source-id: b98cd32bb2a753ff7088533fda4b4e9d4ad5a6e4
This commit is contained in:
Joe Vilches
2024-03-13 10:19:30 -07:00
committed by Facebook GitHub Bot
parent 1db7a3ff61
commit 609a9a7a30
7 changed files with 97 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website-next/docs/styling/min-max-width-height.mdx
View File

@@ -9,7 +9,7 @@ import Playground from '@site/src/components/Playground';
These properties set the maximum and minimum size constraints of a node.
They have higher priority than all other properties and will always be respected.
Constraints can be specified as either absolute pixel values or as percentages of their
[containing block's](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) size. By default all these constraints are `undefined`.
[containing block's](/docs/advanced/containing-block) size. By default all these constraints are `undefined`.
<Playground code={`<Layout config={{useWebDefaults: false}}>
<Node

6
website-next/docs/styling/position.mdx
View File

@@ -9,14 +9,14 @@ import Playground from '@site/src/components/Playground';
**Relative (default)**: This node is laid out according to the specified flow of the flex container it is apart of.
That is, it particpates in the flexbox algorithm and will take up space within the container, unlike absolute.
Insets (`left`, `right`, `top`, `bottom`, etc) will offset the node from its normal position within its container.
This node will always form a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
This node will always form a [containing block](/docs/advanced/containing-block).
**Absolute**: This node is removed from the specified flow of the flex container it is apart of.
Absolute nodes do not take up space in its flex container and will not affect the position of
its siblings. Insets will offset the node from its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
its siblings. Insets will offset the node from its [containing block](/docs/advanced/containing-block).
**Static**: This node behaves like relative except it will ignore insets and will not
form a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
form a [containing block](/docs/advanced/containing-block).
<Playground code={`<Layout config={{useWebDefaults: false}}>
<Node

2
website-next/docs/styling/width-height.mdx
View File

@@ -17,7 +17,7 @@ on its content, whether that is other children, text, or an image.
**Pixels**: Defines the width/height in absolute pixels. Depending on other properties set on
the Yoga node this may or may not be the final dimension of the node.
**Percentage**: Defines the width or height in percentage of its [containing block's](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) width or height respectively.
**Percentage**: Defines the width or height in percentage of its [containing block's](/docs/advanced/containing-block) width or height respectively.
<Playground code={`<Layout config={{useWebDefaults: false}}>
<Node