石不帅_Code

RN 的 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 的布局:

1
2
3
4
5
<View style={styles.topView}>
      <View style={styles.topViewItem}/>
      <View style={styles.topViewItem1}/>
      <View style={styles.topViewItem2}/>
</View>

StyleSheet 中的布局是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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