RN Layout#
Background#
Since the beginning of this year, the newly arrived director of the company has been promoting ReactNative, with the goal of expanding the front-end. React is used for H5, and ReactNative is used for the client, so I need to "review" web layout. By the way, I will record the content in my own blog, as Baor's sister said, "smart and cool".
Content#
Flex layout: Flex is short for Flexible Box. After setting it as a Flex layout, the float, clear, and vertical-align properties of the child elements will be invalid.
Container properties:
The frequently set properties on the container are:
flexDirection // The arrangement direction of the main axis
flexWrap // How to wrap when it cannot fit along the main axis
justifyContent // The arrangement of items on the main axis
alignItems // The arrangement of items on the cross axis
alignContent // The alignment of multiple flex lines. This property does not work if there is only one flex line
alignSelf // Allows individual items to have different alignment from other items, overriding the alignItems property
The possible values for each property are as follows:
flexDirection: 'column' | 'column-reverse' | 'row' | 'row-reverse'
flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse'
justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly'
alignItems: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
alignContent: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch'
alignSelf: 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
The meanings of each value are as follows:
- flexDirection: The arrangement direction of the main axis
column // Default arrangement, from top to bottom
column-reverse // Arranged from bottom to top
row // Arranged from left to right
row-reverse // Arranged from right to left
- flexWrap: How to wrap when it cannot fit along the main axis
nowrap // Default, no wrapping, may cause overflow
wrap // Wrapping, with the first line on top
wrap-reverse // Wrapping, with the first line at the bottom
- justifyContent: The arrangement of items on the main axis
center // Centered
flex-start // Default, left alignment
flex-end // Right alignment
space-around // Equal spacing on both sides of each item. Therefore, the spacing between items is twice the spacing between items and the border
space-between // Align to both ends, with equal spacing between items, n-1 gaps
space-evenly // Equal spacing between both ends and items, n+1 gaps
- alignItems: The arrangement of items on the cross axis
baseline // Align the baseline of the first line of text in the item
center // Align with the center of the cross axis
flex-end // Align with the end of the cross axis
flex-start // Align with the start of the cross axis
stretch // Default, the item occupies the entire height of the container if the height is not set or set to auto
- alignContent: Defines the alignment of multiple flex lines. This property does not work if there is only one flex line.
center // Align with the center of the cross axis
flex-end // Align with the end of the cross axis
flex-start // Align with the start of the cross axis
space-around // Equal spacing on both sides of each flex line. Therefore, the spacing between flex lines is twice the spacing between flex lines and the border
space-between // Align with both ends of the cross axis, with evenly distributed spacing between flex lines
stretch // Default, flex lines occupy the entire cross axis
- alignSelf: Allows individual items to have different alignment from other items, overriding the alignItems property.
auto // Display according to its own set width and height. If not set, the effect is the same as stretch
baseline // Align the baseline of the first line of text in the item
center // Located in the middle position
flex-end // Align with the bottom of the parent container
flex-start // Align with the top of the parent container
stretch // Stretch along the cross axis, only effective when width/height is not set specifically
 flexDirection: 'column' |  flexDirection: 'column-reverse' |  flexDirection: 'row' |  flexDirection: 'row' |