diff --git a/website/contents/properties/absolute-layout.md b/website/contents/properties/absolute-layout.md index f9ea6435..a677e1e9 100644 --- a/website/contents/properties/absolute-layout.md +++ b/website/contents/properties/absolute-layout.md @@ -5,19 +5,26 @@ hasPlayground: true --- ## Absolute/Relative Layout -### Relative Layout +The `position type` of an element defines how it is +positioned within its parent. -The element is positioned according to the normal flow of the view, and then offset relative to itself based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements. Try out relative layout by changing the `positionType` of any child view and try to add offset to it. +**RELATIVE (DEFAULT)** By default an element is positioned +relatively. This means an element is positioned according to the +normal flow of the layout, and then offset relative to that position +based on the values of `top`, `right`, `bottom`, and `left`. +The offset does not affect the position of any sibling or parent elements. -### Absolute Layout - -The element doesn't take part in the normal flow. It is laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom` and `left` values. Try this out in playground. - - -#### Position Type +**ABSOLUTE** When positioned absolutely an element doesn't take +part in the normal layout flow. It is instead laid out independent +of its siblings. The position is determined based on the +`top`, `right`, `bottom`, and `left` values. -#### Position +The position values `top`, `right`, `bottom`, and `left` behave +differently depending on the `position type` of the element. For +a `relative` element they offset the position of the element in the +direction specified. For `absolute` element though these properties +specify the offset of the element's side from the same side on the parent. diff --git a/website/contents/properties/align-content.md b/website/contents/properties/align-content.md index 909ec32b..ffdf9f81 100644 --- a/website/contents/properties/align-content.md +++ b/website/contents/properties/align-content.md @@ -7,7 +7,23 @@ initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiYWxpZ25Db250ZW50IjoxLCJmb ## Align Content -The property defines the distribution of lines along the cross-axis. This only -has effect when items are wrapped to multiple lines (see [flexWrap](flex-wrap)). +Align content defines the distribution of lines along the cross-axis. This only +has effect when items are wrapped to multiple lines using [`flex wrap`](flex-wrap). + +**FLEX START (DEFAULT)** Align wrapped lines to the start of the container's cross axis. + +**FLEX END** Align wrapped lines to the end of the container's cross axis. + +**STRETCH** Stretch wrapped lines to match the `height` of the container's cross axis. + +**CENTER** Align wrapped lines in the center of the container's cross axis. + +**SPACE BETWEEN** Evenly space wrapped lines across the container's main axis, distributing +remaining space between the lines. + +**SPACE AROUND** Evenly space wrapped lines across the container's main axis, distributing +remaining space around the lines. Compared to `space between` using +`space around` will result in space being distributed to the begining of +the first lines and end of the last line. diff --git a/website/contents/properties/align-items.md b/website/contents/properties/align-items.md index 8209d22f..48207114 100644 --- a/website/contents/properties/align-items.md +++ b/website/contents/properties/align-items.md @@ -7,10 +7,10 @@ hasPlayground: true ## Align Items Align items describes how to align children along the cross axis of their container. -Align items is very similar to [Justify Content](justify-content) but instead of -applying to the main axis, Align Items applies to the cross axis. +Align items is very similar to [`justify content`](justify-content) but instead of +applying to the main axis, `align items` applies to the cross axis. -**STRETCH (DEFAULT)** Stretch children of a container to match the height of the container's cross axis. +**STRETCH (DEFAULT)** Stretch children of a container to match the `height` of the container's cross axis. **FLEX START** Align children of a container to the start of the container's cross axis. @@ -22,9 +22,9 @@ applying to the main axis, Align Items applies to the cross axis. ## Align Self -Align self has the same options and effect as Align Items but instead of +Align self has the same options and effect as `align items` but instead of affecting the children within a container, you can apply this property to -a single child to change its alignment within its parent. `Align Self` -overrides any option set by the parent with `Align Items`. +a single child to change its alignment within its parent. `align self` +overrides any option set by the parent with `align items`. diff --git a/website/contents/properties/aspect-ratio.md b/website/contents/properties/aspect-ratio.md index 02c795ec..ffea1d94 100644 --- a/website/contents/properties/aspect-ratio.md +++ b/website/contents/properties/aspect-ratio.md @@ -10,12 +10,12 @@ AspectRatio is a property introduced by Yoga and is not present as a settable property in the css flexbox specification. Flexbox does has the notion of aspect ratio though for things with intrinsic aspect ratio such as images. -The aspect ratio property in Yoga has the following properties: +The `aspect ratio` property in Yoga has the following properties: - Accepts any floating point value > 0, the default is undefined. -- Defined as the ratio between the width and the height of a node e.g. if a node has an aspect ratio of 2 then its width is twice the size of its height. -- Respects the Min and Max dimensions of an item. -- Has higher priority than FlexGrow -- If AspectRatio, Width, and Height are set then the cross dimension is overridden. +- Defined as the ratio between the `width` and the `height` of a node e.g. if a node has an aspect ratio of 2 then its `width` is twice the size of its `height`. +- Respects the `min` and `max` dimensions of an item. +- Has higher priority than `flex grow` +- If `aspect ratio`, `width`, and `height` are set then the cross axis dimension is overridden. diff --git a/website/contents/properties/flex-wrap.md b/website/contents/properties/flex-wrap.md index 60f6de60..1be49f99 100644 --- a/website/contents/properties/flex-wrap.md +++ b/website/contents/properties/flex-wrap.md @@ -7,15 +7,15 @@ initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiYWxpZ25Db250ZW50IjoxLCJmb ## Flex Wrap -The `flexWrap` property is set on containers and controls what happens when +The `flex wrap` property is set on containers and controls what happens when children overflow the size of the container along the main axis. By default children are forced into a single line (which can shrink elements). If wrapping is allowed items are wrapped into multiple lines along the main -axis if needed. `WRAP_REVERSE` behaves the same, but the order of the lines is +axis if needed. `wrap reverse` behaves the same, but the order of the lines is reversed. -When wrapping lines [alignContent](align-content) can be used to specify how the +When wrapping lines [`align content`](align-content) can be used to specify how the lines are placed in the container. diff --git a/website/contents/properties/flex.md b/website/contents/properties/flex.md index a63a331c..940396af 100644 --- a/website/contents/properties/flex.md +++ b/website/contents/properties/flex.md @@ -27,10 +27,10 @@ A container will shrink its children weighted by the child’s flex shrink value **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 FlexDirection = row or setting the Height of a child -if its parent is a container with FlexDirection = column. The flex basis of an item is the -efault size of that item, the size of the item before any flex grow and flex shrink +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 +default size of that item, the size of the item before any flex grow and flex shrink calculations are performed. diff --git a/website/contents/properties/justify-content.md b/website/contents/properties/justify-content.md index 8457c8cd..15c4b0a8 100644 --- a/website/contents/properties/justify-content.md +++ b/website/contents/properties/justify-content.md @@ -8,8 +8,8 @@ hasPlayground: true Justify content describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container -with `flex direction` set to `Row` or vertically within a container with `flex direction` -set to `Column`. +with `flex direction` set to `row` or vertically within a container with `flex direction` +set to `column`. **FLEX START (DEFAULT)** Align children of a container to the start of the container's main axis. @@ -17,12 +17,12 @@ set to `Column`. **CENTER** Align children of a container in the center of the container's main axis. -**SPACE BETWEEN** Evenly space of children across the container's main axis, distrubuting +**SPACE BETWEEN** Evenly space of children across the container's main axis, distributing remaining space between the children. -**SPACE AROUND** Evenly space of children across the container's main axis, distrubuting -remaining space around the children. Compared to `Space Between` using -`Space Around` will result in space being distributed to the begining of +**SPACE AROUND** Evenly space of children across the container's main axis, distributing +remaining space around the children. Compared to `space between` using +`Sspace around` will result in space being distributed to the beginning of the first child and end of the last child. diff --git a/website/contents/properties/min-max.md b/website/contents/properties/min-max.md index 71d105ee..b5d39084 100644 --- a/website/contents/properties/min-max.md +++ b/website/contents/properties/min-max.md @@ -6,43 +6,23 @@ hasPlayground: true ## Max / Min Width and Height +All the following properties set the maximum and minimum size constraints of an element. +These properties 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 +parent's size. By default all these constraints are undefined. + ### Max Width -The `maxWidth` property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by `maxWidth ` + ### Min Width -The `minWidth` property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified by `width `. - -`minWidth` overrides both `maxWidth` and `width`. Try out this in playground. + ### Max Height -The `maxHeight` property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified by `maxHeight`. + ### Min Width -The `minHeight` property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified by `height`. - -`minHeight ` overrides both `maxHeight` and `height`. Try out this in playground. - -Each of the above properties can take the following values - -### Pixel - -One can specify the pixel values for each of the above properties - -### Percentages - -One can specifiy min/max values in terms of the percentage of its parent. - -Try out the above properties in playground. - -#### Max Width - -#### Min Width - -#### Max Height - -#### Min Height diff --git a/website/contents/properties/width-height.md b/website/contents/properties/width-height.md index 493ea214..b77cc1f4 100644 --- a/website/contents/properties/width-height.md +++ b/website/contents/properties/width-height.md @@ -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