From 1b66b5d941a784a19c075f83a9c385729d9f994c Mon Sep 17 00:00:00 2001 From: Pritesh Nandgaonkar Date: Thu, 15 Feb 2018 06:12:12 -0800 Subject: [PATCH] Documentation added for width and height Summary: Width and height documentation Reviewed By: emilsjolander Differential Revision: D6978015 fbshipit-source-id: f62972acaf70be2b6df5056b5deed2a893c10b4c --- website/contents/properties/width-height.md | 23 +++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/website/contents/properties/width-height.md b/website/contents/properties/width-height.md index cced2165..493ea214 100644 --- a/website/contents/properties/width-height.md +++ b/website/contents/properties/width-height.md @@ -6,7 +6,30 @@ hasPlayground: true ## Width and Height +The `width` property in flexbox specifies the width of the element's content area. Similarly `height` property specifies the height of the element's content area. +Both `width` and `height` can take following values + +### Auto +It is the default Value, Yoga calculates the width/height for the element + +### Pixels +Defines the width/height in px + +### Percentage +Defines the width or height in percentage of its parents width or height respectively + +Lets start to play with playground. For starter, lets try fiddling with `width`: + +1. Click on the root view and set `width = auto`, you would see that it would shrink to fit its children. +2. Lets try giving pixel value. Click on any child view, and change its width(say 300), you would now see child view's width is updated +3. Say you want to make your child view half of root view's width. Type 50% in your view's width field, and voila, your view is 50% of its parent. + +You can do similar things with `height` too. Keep fiddling 😉 + +### Width +### Height +