The flex layout in reactnative and the CSS are pretty much about justifycontent and Alignitems's understanding. Both of these properties are related to the Flexdirection row and column, and leaving these two properties means nothing. Coordinates in iOS have the X and Y axes to position the control's location, and these two properties can correspond the row to the horizontal x-axis, and the column is the y-axis.
Flexdirection is deciding which of the X and Y is the main axis, then the child controls are arranged in which direction.
Justifycontent is always based on the spindle as standard, alignitems the sub-elements in the secondary axis.
For example, row is the spindle, the effect is the x-axis right-aligned, the y-axis is centered.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow */
import React, {Component} from ' React ';
Import {Text,image,view,appregistry,stylesheet} from ' react-native ';
Export default class Lostofstyle extends Component {
render () {
return (
<view style={{
flex:1,
flexdirection: ' Row ',
justifycontent: ' Flex-start ',
alignitems: ' Center ',
}}>
< Text style={{width:100,backgroundcolor: ' Powderblue '}}>this is a blue</text>
</View>
);
}
}