Copy review
Reviewed By: danielbuechele Differential Revision: D7009457 fbshipit-source-id: d5053751a2bde369a65a740c03ace5bbd2eec02f
This commit is contained in:
Emil Sjölander
committed by
Facebook Github Bot
Facebook Github Bot
parent
0c74a72fac
commit
bba81781af
@@ -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.
|
||||
|
||||
<controls prop="positionType"></controls>
|
||||
|
||||
#### 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.
|
||||
|
||||
<controls prop="position"></controls>
|
||||
|
||||
@@ -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.
|
||||
|
||||
<controls prop="alignContent"></controls>
|
||||
|
||||
@@ -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`.
|
||||
|
||||
<controls prop="alignSelf"></controls>
|
||||
|
||||
@@ -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.
|
||||
|
||||
<controls prop="aspectRatio"></controls>
|
||||
|
||||
@@ -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.
|
||||
|
||||
<controls prop="flexWrap"></controls>
|
||||
|
||||
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.
|
||||
|
||||
@@ -27,10 +27,10 @@ A container will shrink its children weighted by the child’s flex shrink value
|
||||
<controls prop="flexShrink"></controls>
|
||||
|
||||
**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.
|
||||
|
||||
<controls prop="flexBasis"></controls>
|
||||
|
||||
@@ -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.
|
||||
|
||||
<controls prop="justifyContent"></controls>
|
||||
|
||||
@@ -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 `
|
||||
<controls prop="maxWidth"></controls>
|
||||
|
||||
### 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.
|
||||
<controls prop="minWidth"></controls>
|
||||
|
||||
### 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`.
|
||||
<controls prop="maxHeight"></controls>
|
||||
|
||||
### 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
|
||||
<controls prop="maxWidth"></controls>
|
||||
#### Min Width
|
||||
<controls prop="minWidth"></controls>
|
||||
#### Max Height
|
||||
<controls prop="maxHeight"></controls>
|
||||
#### Min Height
|
||||
<controls prop="minHeight"></controls>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user