React-Native中的Flexbox布局

RN 的 Flexbox 布局的学习笔记

Flexbox

1.什么是 Flexbox 布局?

Flexbox,弹性布局,可以以响应式的方式实现各种页面布局,具有很大的灵活性.属于web 前端 CSS 的一种布局方案.React中也使用了这种布局.

2.基础概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器中有两根坐标轴:水平的主轴(main axis) 垂直的交叉轴(cross axis).
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

来自阮一峰 flex布局

3.基础属性

• flex-direction: 容器的主轴方向,默认是 row. 该值是表示 items 的排列方向布局,默认是从左到右,从上到下.

660d0cdfjw1etlhxise4kj218g0xc0vf.jpg

• flex-wrap: 当主轴宽度的不够的时候,是否换行,怎么换行.

  
  
  

  660d0cdfjw1etlhxjtkfwj218g0xcwhp.jpg

• justify-content: 主轴上项目的对齐方式.

660d0cdfjw1etlhxjven9j218g0xcgp4.jpg

• align-items: cross axis 上项目中子元素的对齐方式.若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则alignItems决定了它们在水平方向的排列方式.
  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

660d0cdfjw1etlhxkrusyj218g0xcwhn.jpg

• align-content: 侧轴上可以换行时,侧轴对齐方式.

  
  
  

  660d0cdfjw1etlhxl3605j218g0xcwip.jpg

4.Demo

先放上效果图:

Simulator Screen Shot

底部有三个View,flex 分别对应1,2,3.
头部 View的高度就是ScreenHeight * 1 / (1 + 2 + 3)
中部 View的高度就是ScreenHeight * 2 / (1 + 2 + 3)
底部 View的高度就是ScreenHeight * 3 / (1 + 2 + 3)

再看头部 View 中 Item 的布局:

StyleSheet 中的布局是:

  topView: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'flex-start',
    backgroundColor: '#FD5056',
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
  },
  topViewItem: {
    width: 60,  // 这里可以指定宽高,也可以设置 flex 去自适应
    height: 60,
    backgroundColor: 'yellow',
  },
  topViewItem1: {
    width: 60,
    height: 80,
    backgroundColor: 'blue',
  },
  topViewItem2: {
    width: 60,
    height: 100,
    backgroundColor: 'black',
  },

Demo 地址

参考资料

Flexbox口诀
http://reactnative.cn/docs/0.46/layout-props.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html