Introduction to react Native (iv) use of Flexbox layout _flex

Objective

Flex, contraction, elasticity means. Elastic (Flex) Width high

About the height of the setting in Rn, we mentioned in the last set of image load network picture, first width and height are two properties, to specify the width of a component, when used can be:
<image Source={pic} style={{width:200, height:200}}/>
can also be defined outside, and then cited, this is not much to say.
The dimensions in the react native are not units, representing the logical pixel points that are independent of the pixel density of the device.

So what is elasticity (flex) is wide and high.
Using Flex in component styles allows it to expand or shrink dynamically in the available space, the official website said. Generally we use flex:1 to specify that a component expands to fill all the remaining space. If multiple side-by-side subassemblies use Flex:1, the subcomponents divide the remaining space in the parent container. If the flex values of these side-by-side components are not the same, then whose value is greater, and who occupies the remaining space is larger (that is, the ratio of the remaining space equals the flex value between the coordinate components).
After reading the description above, I think most people would think of a property of the controls inside Android ...

Yes, it's weight, gravity, weight ...
When we use flex, we can correspond to the weight attribute, which is very good to understand. Flexbox layout

We use the Flexbox rule in react native to specify the layout of the child elements of a component. Flexbox can provide a consistent layout structure on a variety of screen sizes.

In general, using the Flexdirection, Alignitems, and justifycontent three style attributes already meet most layout requirements.

In fact, the elastic box model (flexible box) is CSS3.0 after the addition of new features, the RN in the Flexbox principle and the Web CSS is basically consistent, of course, there are a little difference. First, the defaults are different: The default value for Flexdirection is column instead of row, and flex can only specify a numeric value.

Speaking of which, I'd like to mention the latest Android-constrained layout constraintlayout, which is very similar to the elastic box model (flexible box). Now as when creating a new project, the default layout is already constraintlayout.
We found that when a good design appears, no matter which platform will have the corresponding content appears, so the combination of learning, for us to deepen understanding of this piece is very helpful. Flex Direction

Specifying Flexdirection in the component's style can determine the spindle orientation of the layout. There are two corresponding values: Row is arranged along the horizontal axis, column is arranged along the vertical axis, and the default value is the vertical axis (column) direction.
This can understand the orientation properties of the linear layout linearlayout in Android, corresponding to the same horizontal horizontal and vertical vertical.
As an example:

<view style={{flex:1, flexdirection: ' Row '}}>
  <view style={{flex:1, backgroundcolor: ' Powderblue '}}/ >
  <view style={{flex:1, backgroundcolor: ' Skyblue '}/> <view
  , style={{flex:1: ' Steelblue '}}/>
</View>

To run it, we can see that 3 of colors occupy the same area and are arranged horizontally.

If modified to flexdirection: ' column ', they are found to be arranged vertically. Justify Content

Specifying Justifycontent in a component's style determines how its child elements are arranged along the main axis. The corresponding value has the following several, here we change the above code:

 <view style={{flex:1, flexdirection: ' Row ', justifycontent: ' Flex-start '}}> <view style={{wid Th:50, height:50, backgroundcolor: ' Powderblue '}/> <view-style={{width:50, height:50, BackgroundColor: ' Skyb Lue '}}/> <view style={{width:50, height:50, backgroundcolor: ' Steelblue '}}/> </view> 

Note: The screenshot below is in flexdirection: ' Row ' direction flex-start
The elastic box element will align to the start of the line. The bounds of the primary start position of the first child element of the row are aligned with the bounds of the row's primary start position, and all subsequent telescopic box items are aligned with the previous item. The
Center
Elastic Box element snaps to the middle of the line. The child elements of the row are aligned to each other and are centered in the line, while the first element is equal to the margin of the main start position of the row with the last element and the row's primary end position (if the remaining space is a negative number, an overflow of equal length at both ends is maintained). The
flex-end
Elastic box element snaps to the end of the line. The boundary of the primary end position of the first child element of the row is aligned with the boundary of the row's primary end position, and all subsequent telescopic box items are aligned with the previous item. The
space-around
Elastic box elements are evenly spaced across rows, preserving half the amount of space between child elements and child elements. If the left-most space is negative, or if the row has only one telescopic box item, the value is equivalent to ' center '. In other cases, the telescopic box item is evenly distributed and ensures that the blank space between 22 is equal, while the space before the first element and the space after the last element is half that of the other blank space. The
Space-between
Elastic box elements are evenly distributed in the rows. If the left-most space is a negative number, or if the row has only one child element, the value is equivalent to ' Flex-start '. In other cases, the boundary of the first element is aligned with the bounds of the main starting position of the row, while the boundary of the last element is aligned with the margins of the row's primary end position, while the remaining telescopic box items are evenly spaced and ensure that the space between 22 is equal.
Align Items

Specify Alignitems in the component's style to determine how its child elements are arranged along the secondary axis (the axis perpendicular to the spindle, such as column in the direction of the main axis).
Here we set justifycontent in the top code: ' Center ', then add this property and look at the effect.
The corresponding optional values are: Flex-start
The boundary of the starting position of the sub axis of the child element is close to the starting boundary of the secondary axis of the row.
Center
The child element is centered on the secondary axis of the row.
(If the size of the row is less than the child element size, the same length is overflowed in two directions).
Flex-end
The bounds of the starting position of the sub-element's secondary axis close to the secondary axis of the line.
Stretch
The meaning of stretching means that the child elements extend above the secondary axis direction.
This is a little special, and for the stretch option to take effect, the child element cannot have a fixed size in the secondary axis direction. Our code in the main axis direction flexdirection: ' Row ', so the vertical direction can not have a fixed size, so the height:50 are removed.
Conclusion

This article learned about the use of Flexbox layout related content, in the next blog, we need to understand the common input box and the basic use of buttons, and with Flexbox to build a simple login interface.
OK, first of all, I'll see you in the next article.