react native入门：Flexbox布局 容器属性flexDirection、flexWrap、flexFlow、justifyContent 项目属性order、flexGrow

好记性不如烂博客。
这篇博客是基于以下教程做的简略笔记，方便以后查阅：

• 5分钟吃透React Native Flexbox
• React Native基础&入门教程：初步使用Flexbox布局
• 《Flex 布局教程：语法篇》——阮一峰
• 《react native 跨平台移动应用开发》——阙喜涛 电子工业出版社

Flexbox布局

在React Native中布局采用的是FleBox(弹性框)进行布局，Flexbox布局，也就是弹性盒模型布局。理解弹性盒模型布局，首先要知道四个最基本的概念：Flex Container（容器），Flex Item（项），Flex Direction（方向）和Axis（轴）。

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

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

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

RN的UI布局主要是通过各个style属性中各个键的设置来实现，样式都是JSON格式的数据，也就是一个个键值对。

一、位置、宽高、边框、空隙、填充

position：relative（相对的，默认）absolute（绝对）。absolute时可以用top bottom left right 表示距离父控件的上下左右沿有多少pt，relative时可以用top和left，默认为0，表示当前组件距离上一个同级组件的上左沿有多少pt。

在flexbox布局中，尽量不指定组件宽高：width、height、maxHeight、minHeight等

边框border，空隙margin，填充padding的关系：margin是组件与组件的空间，padding是内容与边框的空间。

borderWidth、borderTopWidth等可以指定边框宽度。
padding、paddingHorizontal等可以指定边框与内容之间的空间大小。
margin，marginVertical等指定组件之间的空隙。

本文中的样式键只是举个例子方便理解，没有全部列出来，更全面的样式可以通过这篇查：React-Native 样式指南

二、容器（父组件）的属性：flexDirection、flexWrap、flexFlow、justifyContent、alignItems、alignContent

（下面列举的属性第一个为默认值）

• flex-direction属性决定主轴的方向（即项目的排列方向）：row | row-reverse | column | column-reverse
• flex-wrap属性定义，如果一条轴线排不下，如何换行：nowrap（不换行） | wrap（第一行在上面） | wrap-reverse（第一行在下面）
• flex-flow属性是上面两个属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式：flex-start | flex-end | center | space-between | space-around（每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。）如下图：
  
• align-items属性定义项目在交叉轴上如何对齐：stretch | flex-end | center | baseline（项目的第一行文字的基线对齐） | flex-start;
  
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用：stretch | flex-end | center | space-between | space-around | flex-start;

三、项目（子组件）的属性:order、flexGrow、flexShrink、flex、aligSelf

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍（按比例分步）。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小（按比例缩小，0表示不缩小，负值对该属性无效）
• flex-basis设置主轴方向上的初始值，如果与width或者height同时存在，则会覆盖它们，默认值为auto，即项目的本来大小，也可以写数值，则项目将占据固定空间。
• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可以不填。快捷值：auto (1 1 auto) 和 none (0 0 auto)。
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  

四、样式声明

一般用法：如果组件样式一直不变，这么用就可以。

//...
<View style={styles.container}>
</View>
//...
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  });

组件可以有多种样式：RN会对这些样式做一个合并操作，如果一个键有重复定义，后面的样式会覆盖前面的。

style={[styles.container,styles.container2,styles.container2]}

有时候样式在运行过程中要改变，就需要直接在描述样式的JSX代码里写入样式：

<Text style={{fontSize: 18, color:finishWeb?'#A3A3A3':'white'}}>网站1</Text>

小结

justify-content和align-content这两个属性，可能比较容易搞错它们作用的方向。justify-content是设置items沿着主轴上是如何分布的。align-content是设置items沿着侧轴如何对齐的。

margin和padding也容易搞混，margin是组件边框与外面的距离，padding是组件边框与内容的距离。