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

Copy review

Browse Source 
Reviewed By: danielbuechele

Differential Revision: D7009457

fbshipit-source-id: d5053751a2bde369a65a740c03ace5bbd2eec02f
This commit is contained in:
Emil Sjölander
2018-02-16 06:41:54 -08:00
committed by Facebook Github Bot
parent 0c74a72fac
commit bba81781af
9 changed files with 74 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
website/contents/properties/width-height.md
View File

@@ -6,26 +6,18 @@ 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.
The `width` property in Yoga 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
Both `width` and `height` can take following values:
### Auto
It is the default Value, Yoga calculates the width/height for the element
**AUTO** Is the default Value, Yoga calculates the width/height for the element based
on its content, whether that is other children, text, or an image.
### Pixels
Defines the width/height in px
**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 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 😉
**PERCENTAGE** Defines the width or height in percentage of its parent's width or height respectively.
### Width
<controls prop="width"></controls>