4, hands-on teaching react native actual combat flexbox layout (scaling properties)

# # #Expand Item Properties
1.order

define the order in which the items are arranged, the smaller the number, the higher the alignment, the default value is 0, the syntax is: Order: integer value

2.flex-grow

defines the magnification of the scaling item, which is the default value of 0, which means that if there is space left, it does not enlarge, the syntax is: flex-grow: integer value

3.flex-shrink

defines the shrinkage capability of the scaling project, with the default value of 1, with the syntax: Flex-shrink: integer value

4.flex-basis

used to set the base value of the scaling item, the remaining space is scaled by the ratio, with the syntax: flex-basis:length | auto, the default value is auto

5.flex

is the abbreviation for the three attributes of the Flex-grow Flex-shrink Flex-basis, whose syntax is: Flex:none | flex-grow flex-shrink flex-basis, where the second and third arguments are optional parameters, The default value is: 0 1 Auto

6.align-self

used to set the alignment of individual telescopic items on the cross axis, overriding the default alignment, with the syntax: Align-self:auto | flex-start | flex-end | center | baseline | Stretch ( Telescopic items occupy the telescopic container in the cross-axis direction, if the intersection axis is vertical, you can see the effect only if the height is not set.

# # # #在React using Flexbox in native

RN currently supports the following 6 properties of Flexbox:

1.alignItems

used to define the alignment of the scaling item on the intersection axis, with the following syntax:
Alignitems:flex-start (default value) | flex-end | center | stretch

2.alignSelf

used to set the alignment of individual telescopic items on the intersection, overriding the default alignment, with the following syntax: Alignself:auto | flex-start | flex-end | center | Stretch (Telescopic project fills the telescopic container in the cross-axis direction, If the intersection axis is vertical, you can see the effect only if you don't set the height.

3.flex

is the abbreviation for the three attributes of the Flex-grow Flex-shrink Flex-basis, whose syntax is: Flex:none | flex-grow flex-shrink flex-basis, where the second and third arguments are optional parameters, The default value is: 0 1 Auto

4.flexDirection

specify the direction of the spindle flex-direction:row| row-reverse | column (default) | Column-reverse

5.flexWrap

6.justifyContent



# #4, Matching video (): Https://yunpan.cn/cYIG6dCUNIRkB access password D6b6

4, hands-on teaching react native actual combat flexbox layout (scaling properties)