From bb9d080d0405ced10e1e24a17d40591496457698 Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Tue, 12 Mar 2024 11:31:46 -0700 Subject: [PATCH] Add width/height documentation (#1603) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1603 tsia Reviewed By: yungsters Differential Revision: D54781571 fbshipit-source-id: 136ac9a89296bc5110b01d96243944ad716fa5e4 --- website-next/docs/examples/width-height.mdx | 31 +++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/website-next/docs/examples/width-height.mdx b/website-next/docs/examples/width-height.mdx index 3d794047..2ed7e2f8 100644 --- a/website-next/docs/examples/width-height.mdx +++ b/website-next/docs/examples/width-height.mdx @@ -2,4 +2,35 @@ sidebar_position: 14 --- +import Playground from '@site/src/components/Playground'; + # Width and Height + +The `width` property specifies the width of the node's border box (the collective size of the node's content, padding, and border). +Similarly `height` property specifies the height of the node's border box. + +Both `width` and `height` can take following values: + +**Auto**: The default Value, Yoga calculates the width/height for the node based +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. + + + + + +`} />