初识-flexbox布局

1. 介绍

1. Flexble Box的缩写，弹性盒子布局，主流的浏览器都支持；
2. flexbox布局是伸缩器（container，即容器）和伸缩项目（item，即子控件）组成；
3. flexbox布局的主体思想是元素可以改变大小以适应可用空间，Flex元素可以让布局根据浏览器的大小变化进行自动伸缩；
4. 伸缩容器主要由主轴和次轴组成，主轴可以是水平轴（默认）亦可是垂直轴，那么次轴就是垂直轴或水平轴；

---

2. 主要属性

1. 伸缩容器的属性（即容器自身的属性）
   1. display

      1. flex：块级伸缩容器
      2. inline-flex：行内级伸缩容器

   2. flex-direction：指定主轴的方向

      1. row：从左到右（默认值）
      2. row-reverse：从右到左
      3. column：从上到下
      4. column-reverse

   3. flex-wrap：伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行

      1. nowrap：不换行（默认值）
      2. wrap：换行（如果主轴方向为row时，则换行顺序为自上而下）
      3. wrap-reverse：反向换行（如果主轴方向为row时，则换行顺序为自下而上）

   4. flex-flow：是flex-direction和flex-wrap的缩写版本，它同时定义了伸缩容器的主轴和换行方式（即2和3的集合体，其默认值为row nowrap）
   5. justify-content：沿主轴线方向的对齐方式

      1. flex-start：起始位置（默认值）
      2. flex-end：结束位置
      3. center：居中
      4. space-between：平均分配到主轴线上
      5. space-around：平均分配到主轴线上，并且子控件两边各留出相同的距离

   6. align-items：沿次轴方向的对齐方式

      1. flex-start：起始位置（默认值）
      2. flex-end：结束位置
      3. center：居中
      4. baseline：基准线对齐
      5. stretch：拉伸

   7. align-content：换行后在次轴方向上的对齐方式

      1. flex-start
      2. flex-end
      3. center
      4. space-between
      5. space-around
      6. stretch：默认值

2. 伸缩项目的属性（即容器中子控件的属性）
   1. oeder：控件排列顺序，数值越小越靠前（可以有负数，默认值为0）
   2. flex-grow：控件的放大比例（默认值为0，即表示如果存在剩余空间也不放大）
   3. flex-shrink：控件的收缩比例（默认值为1）
   4. flex-basis：设置控件的基准（其值为：整数px，如200px；默认值为auto）
   5. flex：是flex-grow flex-shrink flex-basis这三个属性的缩写，其中第二个和第三个参数为可选项（默认值为 0 1 auto）
   6. align-self：控件自身在次轴上的对齐方式

      1. auto：默认值
      2. flex-start：
      3. flex-end：
      4. center：
      5. baseline：
      6. stretch：拉伸，只有在宽（次轴为水平方向）高（次轴为垂直方向）没有设置的情况下，才会有效

3. React Native目前主要支持flexbox的6个属性：

   1. alignItems：沿次轴方向的对齐方式（注：无baseline值，故其值为：flex-start | flex-end | center | stretch）
   2. alignSelf：控件自身在次轴上的对齐方式（注：同样没有baseline值，故：auto | flex-start | flex-end | center | stretch）
   3. flex：是flex-grow flex-shrink flex-basis这三个属性的缩写，其中第二个和第三个参数为可选项（默认值为 0 1 auto）
   4. flexDirection：指定主轴的方向（注：在这种情况下默认值为column）
   5. flexWrap：
   6. justifyContent：