Flexbox是Flexible Box的缩写，意为'弹性布局'，它为盒状模型提供了很大的灵活性，让任何一个容器都可以指定为Flex布局。

使用Flex布局的元素，称为Flex容器(flex Container)，简称'容器'。它的所有子元素自动成为容器的成员，称为Flex项目(flex Item)

Flex

是CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。

• flex的主要概念

• 1、容器 和 子项目

• 容器的属性 和成员的属性（这个一定要弄清楚，不能瞎用，否则是浪费时间）

• 2、主轴 和 侧轴

• 主轴默认的方向是水平

• 容器使用主轴的方向

• 主轴和侧轴是垂直关系

• 当你改变主轴方向为垂直的时候，想要成员水平居中，这时应该设置侧轴的属性align-items：center

• 3、RN中flex的属性

属性名	取值	描述
flexDirection	row, row-reverse, column, column-reverse	对应 CSS flex-direction 属性,默认为column
flexWrap	wrap, nowrap	对应 CSS flex-wrap 属性，但阉割了 wrap-reverse 取值
justifyContent	flex-start, flex-end, center, space-between, space-around	对应 CSS justify-content 属性，但阉割了 stretch 取值。
alignItems	flex-start, flex-end, center, stretch,baseline	对应 CSS align-items 属性。
alignContent	flex-start, flex-end, center, stretch, space-between, space-around	对应 CSS align-items 属性。
flex	number	对应 CSS flex 属性，但只能为正整数值才会具有弹性
alignSelf	auto, flex-start, flex-end, center, stretch,baseline	对应 CSS align-self 属性
flexGrow	number	对应 CSS flex-grow 属性
flexShrink	number	对应 CSS flex-shrink 属性
flexBasis	number	对应 CSS flex-basis 属性

• 4、复杂的flex应用

• 三栏布局

• 全局布局

• 悬挂式布局

• 水平垂直居中

• 平分等分布

• 等

• 5、 flex的优缺点

• 优点：对于某些复杂的布局很容易实现

• 缺点：兼容性，不能兼容IE9及以下浏览器，移动端都能支持
  

与web的不同

• 1、StyleSheet.create来集中定义组件的样式，然后通过style属性来实现。驼峰式的写法，作为对象让移动端浏览器解析。长度不用加单位“px”，字符串比如色值需要加引号写成字符串

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});12345678910111213141516171819

• 2、具有组合性。样式组合是数组形式，web是字符串 空格隔开

1

• 3、具有覆盖性。

• RN属性在使用数组对象样式时，如果有两个对象的样式属性相同，RN会默认选择最后一个。

• 继承时的覆盖，只有最近原则和最直接原则。

• 没有优先级思想。因为不需要id，class之类的所以没有优先级。

• 4、支持条件性。RN支持条件性样式

1

• 5、具有传递性。RN支持样式传递
  在调用组件的时候，可将样式作为参数进行传递。View.propTypes.style和Text.propTypes.style.

propTypes:{
    style:View.propTypes.style,
    textStyle:Text.propTypes.style
}
用的时候：
123456

• 6、具有部分继承性

• 样式的继承只存在于Text元素内的Text元素，换句话说是Text元素里面的Text元素存在继承；继承的规则是子Text元素继承祖先Text和父Text元素的样式整合后的样式。

• 包裹在View元素中的Text表现为block，可以设置margin和padding的各种属性；包裹在Text元素中的Text表现为inline元素，不能设置其marginTop和marginBottom， padding等用于block元素的属性

• 7、布局样式的不同

• 没有的属性order、flex-flow

• RN的flex布局默认为column布局，css的默认为row布局

• view 相当于web中的

  ，会占容器100%的宽度，不能用fontSize属性

• 8、position属性只有absolute和relative，不能用zIndex。

• 在RN开发中，决定用什么布局的是由child来决定的,React Native中的position默认为relative，相对于 上一个兄弟节点

• React Native中的position默认为relative，所以绝对定位总是相对于父节点的