浅谈FlexBox布局

一、体验FlexBox布局

   1. 我们之前做的web布局都是基于盒子模型，而现在我们有一种全新的布局方式-flex布局，它又叫做弹性盒模型，指在通过弹性的方式来对齐和分布容器中的内容，使其能使用不同屏幕，为盒模型提供最大的灵活性，目前他已经得到了所有浏览器的支持。

   2. 上面说的是官话，说实话我刚看到上面的解释也是一脸懵逼，等你正在懂了什么叫弹性布局，你再回来看这段话，你会发现还是一脸懵逼。下面我使用使用iOS的布局方式、HTML的布局方式，RN的弹性布局方式，实现如下效果。通过对比的方式首先来让大家体验一下弹性布局。

       1) iOS布局方式

       

       2) HTML的布局方式

       

       3) HTML的布局方式

        


   3. HTML方式和RN方式的对比

      1) HTML方式首先要做的是设置html和body的宽和高是100%，然后在设置父元素的高宽为100%,RN只需设置父组件的组件的样式属性flex为1

      2) HTML设置水平方向的居中方式是把需要居中的子元素都设置为margin：0 atuo，RN只需父组件的样式属性justifyContents:"center"，便可实现父组件中所有的子组件都水平居中

      3) HTML设置垂直居中方式是子元素设置margin:auto;postion:absolute;top:0;left:0;bottom:0;right:0;并且该子元素要设置宽和高，RN只需父组件的样式属性alignItems:"center"，便可实现所有的子组件都垂直居中

      4) 上面RN的布局方式就是我们上面提到的FlexBox布局也叫作弹性盒模型。可以不仅大大减少我们布局的代码量，而且使我们的布局逻辑更加清晰。

二、FlexBox布局

   1. flexbox布局主要思想

      父组件让子组件能够改变他的宽高，以最佳方式来填充可用空间

   2. flexbox布局原理

       每个组件默认存在两根轴

        主轴: 默认是垂直方向
        侧轴(交叉轴)：跟主轴的方向始终是垂直状态


   3. flexbox中最基本的四个样式属性

      1) flexDirection - 决定该组件主轴的方向

          row: 主轴为水平方向
          column：主轴为垂直方向

          示例图见《flexDirection详解》

      2) justifyContent - 定义该组件的所有子组件在主轴线的对其方式

          flex-start: 组件的子组件向主轴的起始位置靠齐
          flex-end: 组件的子组件向主轴的结束位置靠齐
          center: 组件的子组件向主轴的中间位置靠齐
          space-between: 组件的子组件向主轴的两端对齐，项目之间的间隔都相等
          space-around:组件的子组件平均的分布主轴，两端保留子组件间隔的一半。


      3) alignItems - 定义该组件的所有子组件在侧轴线的对其方式


      4) flexWrap - 让组件的子组件都排在一条线

          nowrap(默认值)：不换行
          wrap: 换行

          注：如果设置wrap不起作用，是因为版本的问题，此时只需给他设置一个alignItems属性

   4. flexbox中其他几个样式属性

      1) flex - 设置组件的宽度，高度默认100%

         示例图原理说明

         a) 上图红色是父组件，宽度为350，他的子组件分别是粉色、橘黄色、蓝色、灰色。

         b) 灰色的宽是固定50，此时红色剩余的可用宽度为350-50=300

         c) 其他三个色块都是通过flex来设置宽度，他们的flex分别是1,2,3,此时表明，粉色、橘黄色、绿色他们要分掉红色剩余的宽度。

         d) 分的方式如下：把300分成7(三个色块的flex值相加)份，粉色占1份，橘黄色占2份，绿色占3份。

      2) alignSelf - 设置某个子组件在侧轴的对齐方式

          可覆盖align-items属性,默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
            auto/flex-start/flex-end/center/stretch
      

 
三、获取屏幕的宽高

  1. 首先需要获取到系统的Dimensions类库

        var dimensions = require("Dimensions");

  2. 通过ES6的结构赋值获取值(不懂结构赋值的自行百度啊)

        var {width,height} = dimensions.get("window");

  3. 或者通过ES5来获取

        var width = dimensions.get("window").width;
        var height = dimensions.get("window").height;




四、绝对定位与相对定位

   与CSS的定位基本一直，下面我主要提一下不同的地方

     1. RN中的决定定位不需要再让父组件处于定位状态了

     2. 而且如果父组件设置了内边距，relative会做出相应的定位改变,而absolute则不会