ReactNative style

const styles = StyleSheet.create({
    frame:{
        backgroundColor:'blue',
        width:'100%', // value:Number % 设置宽度基于外层dom的百分比
        height:300, // value:Number % 设置高度固定值
        padding:20, //  设置内边距  paddingTop,paddingLeft, paddingRight,paddingBottom paddingHorizontal paddingVertical
        margin:20, // 外边距 额外属性同padding 
        maxWidth:300, // 最大宽度  maxHeight minWidth minHeight
        top:100, // value:Number 顶部距离  css可以使用百分比 reactNative不行

        /*
        自身子元素的布局在自身次轴的开始位置 默认start
        enum('flex-start', 'flex-end', 'center', 'stretch','baseline')
        start:|-----| , end:|-----|, center:| ----- |, stretch:|-----|, baseline:|--t--|
              |---  |       |  ---|         |  ---  |          |-----|           |--t- |
              |-    |       |    -|         |   -   |          |-----|           | -t- |
        */
        alignItems:'center', 

        /*
        自身在父元素布局的开始位置 针对自身 默认auto
        enum('auto', 'flex-start', 'flex-end', 'center', 'stretch','baseline')

        下面是外层元素 alignItems =  flex-start 时 自身不同的 alignSelf 的表现
        start:|-----| , end:|-----|, center:|-----|, stretch:|-----|, baseline:|--t--|, auto:|-----|继承
              |---  |       |---  |         |---  |          |-----|           |---t |       |---  |   
              |-    |       |    -|         |  -  |          |-----|           | --t |       |-    |
        */
        alignSelf:'center', 

        /*
         分布对齐方式 默认start
         enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')  
         start:|---    |, end:|    ---|, center:|  ---  |, between:|-  -  -|, around:| - - - |
        */
        justifyContent:'center', 
        flexDirection:'row', // enum('row','column') 子元素排列方向 默认:继承父元素(column)
        flexWrap:'wrap', // enum('wrap','nowrap' ) 是否换行 默认nowrap
        
        /*
         等同于  flexBasis = 0 flexGrow = 0 flexShrink = 0
        */
        flex:0, 
        flexBasis:0,// 基准值 如果flex 
        flexGrow:1, // 拉伸系数 0为不拉伸 
        flexShrink:1, // 压缩系数 0为不压缩
        overflow:'scroll', //  enum('visible', 'hidden', 'scroll')  内容溢出以后显示样式 visible:元素外显示 hidden:隐藏多余内容 scroll:滚动显示
    },
}