第三章：reactNative开发中弹性盒子布局

在css3中提供了一个弹性盒子布局适合手机端开发,在reactNative官方也推荐使用的布局方式,至于概念就不去介绍,就介绍几个常用的属性。更多信息请查阅阮一峰

一、区分容器属性与项目属性

简单来说你使用了display:flex的元素就是容器属性,它下面的元素就是项目属性

二、常见的容器属性

• 1、flex-direction 决定项目是水平排列还是垂直排列
  
  • row 水平排列
  • row-reverse 水平反向排列
  • column 垂直排列
  • column-reverse 垂直反向排列
• 2、flex-wrap 决定项目如果一行排列不下以什么方式展示
  
  • nowrap 不换行
  • wrap 换行
  • wrap-reverse; 换行排列在上面
• 3、flex-flow 是flex-direction属性和flex-wrap属性的简写形式可以不去理会
• 4、justify-content 项目在主轴上的对齐方式
  
  • flex-start 开始位置
  • flex-end 结束位置
  • center 中间
  • space-between 两端对齐，项目之间的间隔都相等
  • space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
• 5、align-items 项目在交叉轴上的对齐方式
  
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
• 6、align-content 多根轴线的对齐方式

三、常见的项目属性

• 1、order 排序方式,数字越小就越在前面
• 2、flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• 3、flex-shrink 定义了项目的缩小比例，默认为1
• 4、flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间
• 5、flex 是flex-grow、flex-shrink和flex-basis三属性的简写总和
• 6、align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

项目属性中常用的flex:1表示平分 align-self表示单独定义项目的布局方式