flex is a number rather than a string, and it works according to the Yoga layout engine. In React Native flex does not work the same way that it does in CSS. This style takes precedence over the left and right styles. When the direction is rtl, end is equivalent to left. When the direction is ltr, end is equivalent to right.

It works similarly to display in CSS but only supports 'flex' and 'none'. Typeĭisplay sets the display type of this component. The default is inherit, except for root node which will have value based on the current locale. Typeĭirection specifies the directional flow of the user interface. See for more details of how bottom affects layout. It works similarly to bottom in CSS, but in React Native you must use points or percentages. Typeīottom is the number of logical pixels to offset the bottom edge of this component. TypeīorderWidth works like border-width in CSS. TypeīorderTopWidth works like border-top-width in CSS. When direction is rtl, borderStartWidth is equivalent to borderRightWidth. When direction is ltr, borderStartWidth is equivalent to borderLeftWidth.

TypeīorderRightWidth works like border-right-width in CSS. TypeīorderLeftWidth works like border-left-width in CSS.

When direction is rtl, borderEndWidth is equivalent to borderLeftWidth. When direction is ltr, borderEndWidth is equivalent to borderRightWidth. Aspect ratio takes min/max dimensions into accountīorderBottomWidth works like border-bottom-width in CSS.On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset.On a node with a measure function, aspect ratio works as though the measure function measures the flex basis.On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset.On a node with a set width/height, aspect ratio controls the size of the unset dimension.TypeĮnum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')Īspect ratio controls the size of the undefined dimension of a node. It works like align-self in CSS (default: auto). TypeĮnum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')ĪlignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-items in CSS (default: stretch). For example, if children are flowing vertically, alignItems controls how they align horizontally. TypeĮnum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around')ĪlignItems aligns children in the cross direction. AlignContent controls how rows align in the cross direction, overriding the alignContent of the parent.

Flex type property