布局样式属性

一 flexbox 布局基础知识

1 . 什么是Flexbox

Flexbox 是css3 里面引入的布局模型－弹性盒子模型，旨在通过弹性的方式来对齐和分布容器中的内容空间，

使其能够适应不同屏幕的宽度。react nativie中 的flexbox 是这个规范的一个子集

采用Flex布局的元素，称为Flex容器（flex Container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2 . Flexbox解决了什么问题？

浮动布局

不同宽度屏幕的适

宽度自动分配

水平垂直居中 

                          

二 Flex 属性

1 . 容器属性

flexDirection   

决定控件的排列方式  : row,row-reverse,colum,colum-reverse   在组件的style中指定flexDirection可以决定布局的主轴。 默认是column

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。
默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

// row: 水平方向排列，内部控件左对齐，控件从左向右顺序排列
// row-reverse: 水平方向排列，内部控件右对齐，控件从右向左顺序排列
// column: 垂直方向排列，内部控件上对齐，控件从上向下顺序排列
// column-reverse: 垂直方向排列，内部控件下对齐，控件从下向上顺序排列

justifyConten t

决定其子元素沿着主轴的排列方式 :  flex-start,flex-end,center,space-between,space-rout  (在不写justifyContent的时候，默认是flex-start)

 // flex-start: 在flexDirection的基础上，对齐flex开始的位置
 // flex-end: 在flexDirection的基础上，对齐flex结束的位置
 // center: 在flexDirection的基础上，flex居中对齐
 // space-between: 控件的间距相同
 // space-around: 控件的边距相同，也就是说每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

alignItems      

决定了子元素在次轴方向的排列方式（此样式设置在父元素上）。 flex-start,flex-end,center,stretch    # item 的 排列对齐方式 ，上对齐，下对齐 上下间距对齐， 以及严苛对其。默认是stretch   

例如若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则alignItems决定了它们在水平方向的排列方式。此样式和CSS中的align-items表现一致。

 // flex-start: 在flexDirection的基础上，对齐flex开始的位置
 // flex-end: 在flexDirection的基础上，对齐flex结束的位置
 // center: 在flexDirection的基础上，flex居中对齐
 // stretch: 拉伸，如果项目未设置高度或设为auto，将占满整个容器的高度。
 // baseline: 项目的第一行文字的基线对齐。

flexWrap       

默认情况下 ，项目都排在一条线(又称"轴线")上。flexWrap 属性定义，如果一条轴线排不下，如何换行  :   wap,nowap,wap-reverse                      

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

align-content

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start | flex-end | center | space-between | space-around | stretch;

 //flex-start：与交叉轴的起点对齐。
 //flex-end：与交叉轴的终点对齐。
 //center：与交叉轴的中点对齐。
 //space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
 //space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
 //stretch（默认值）：轴线占满整个交叉轴。

2 . 元素属性(项目的属性)

以下6个属性设置在项目上。order  |  flex-grow  |  flex-shrink |  flex-basis  |  flex  |  align-self

flex   

是 flex-grow,flex-shrink, flex-basis  三个属性的缩写，其中第二和第三个参数是可选参数。默认值为"0 1 auto"。

宽度 = 弹性宽度 (flexGrow/ sum(flexGrow))    

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

               

alignSelf  

atuo,flex-start,flex-end,center,stretch  

决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），允许单个项目与其他项目不一样的对齐方式，其值会覆盖父元素的alignItems的值。其表现和CSS上的align-self一致（默认值为auto）。表示继承父元素的alignItems属性，如果没有父元素，等同于stretch

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

           

3.JaveScript 语法基础

        经常看到源码里面符号 ＝>表示的意思

        //ES

          var selected = allJobs.filter(function (job) {

           return job.isSelected();

          });

       // ES6

         var selected = allJobs.filter(job => job.isSelected());                     

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class Flexbox extends Component {
    render() {
        return (

            <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
              <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
              <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
              <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
            </View>
        );
    }
};

AppRegistry.registerComponent('Flexbox', () => Flexbox);

上面代码也可写成:

export default class Flexbox extends Component {
    render() {
        return (

            <View style={styles.container}>
              <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
              <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
              <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        }
    }
);

注意 : 注释一段代码不能用// 要用

{/*  <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />*/}

三 在React Native 中使用flexbox

获取当前屏幕的高度，宽度和分辨率

// 引入
var Dimensions = require('Dimensions');
var {width, height, scale} = Dimensions.get('window');

class FlexBoxDemo3 extends Component {
    render() {
        return (
            <View style={styles3.outViewStyle}>
              <Text>当前屏幕的宽度:{Dimensions.get('window').width}</Text>
              <Text>当前屏幕的高度:{Dimensions.get('window').height}</Text>
              <Text>当前屏幕的分辨率:{Dimensions.get('window').scale}</Text>
            </View>
        );
    }
};

const styles3 = StyleSheet.create({
    outViewStyle:{
        // 占满屏幕
        flex:1,
        //  主轴方向居中
        justifyContent:'center',
        // 侧轴方向居中
        alignItems: 'center',
        // 背景
        backgroundColor:'skyblue'
    }
});