TypeĮnum('row', 'row-reverse', 'column', 'column-reverse')įlexGrow describes how any space within a container should be distributed among its children along the main axis. It works like flex-direction in CSS, except the default is column. row goes left to right, column goes top to bottom, and you may be able to guess what the other two do. TypeįlexDirection controls which directions children of a container go. The flexBasis of an item is the default size of that item, the size of the item before any flexGrow and flexShrink calculations are performed. Setting the flexBasis 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. TypeįlexBasis is an axis-independent way of providing the default size of an item along the main axis. However, if there's not enough space, the component will shrink to its minWidth and minHeight.įlexGrow, flexShrink, and flexBasis work the same as in CSS. When flex is -1, the component is normally sized according to width and height. When flex is 0, the component is sized according to width and height, and it is inflexible. flex: equates to flexGrow:, flexShrink: 1, flexBasis: 0. So a component with flex set to 2 will take twice the space as a component with flex set to 1. When flex is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. 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. Only pixel units are supported in React Native. TypeĬolumnGap works like column-gap in CSS. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |