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 的布局:
<View style={styles.topView}>
<View style={styles.topViewItem}/>
<View style={styles.topViewItem1}/>
<View style={styles.topViewItem2}/>
</View>
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',
},
参考资料
Flexbox口诀
http://reactnative.cn/docs/0.46/layout-props.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
