6.5 flex布局
Flex是Flexible Box的缩写,意为“弹性布局”,2009年它由W3C提出了一种新的网页布局方案。QAP也支持flex布局。目前flex支持的容器属性有:flexDirection、flexWrap、justifyContent、alignItems、width和height等属性。
flexDirection
flexDirection属性决定了主轴的方向,它有两个值(不支持row-reverse和column-reverse):
row: 主轴为水平方向,起点在左端 column: 主轴为垂直方向,起点在顶部
'use strict';
import { mount } from 'weex-rx-mounter';
import { createElement, Component } from 'weex-rx';
import { View, Text } from 'nuke';
class Demo extends Component {
render() {
return (
<View>
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'darkturquoise'}} />
<View style={{width: 50, height: 50, backgroundColor: 'gold'}} />
<View style={{width: 50, height: 50, backgroundColor: 'lightgreen'}} />
</View>
<View style={{flex: 3, flexDirection: 'column'}}>
<View style={{width: 50, height: 50, backgroundColor: 'darkturquoise'}} />
<View style={{width: 50, height: 50, backgroundColor: 'gold'}} />
<View style={{width: 50, height: 50, backgroundColor: 'lightgreen'}} />
</View>
</View>
);
}
}
mount(<Demo />, 'body');
export default Demo;
alignItems
表示与主轴(flexDirection)
垂直方向,子元素的排列方式。可选值:flex-start', 'flex-end', 'center', 'stretch'。下图表示主轴(flexDirection)为横轴时四种可选值的子元素排列情况:
justifyContent
与alignItems相呼应,表示子元素在主轴(flexDirection)
方向上的对齐方式。可选值:flex-start, flex-end, center, space-between, space-around。下图表示主轴(flexDirection)为横轴时5种可选值的子元素排列情况
alignSelf
重写父元素定义的alignItem属性
可选值: 'auto'(默认), 'flex-start', 'flex-end', 'center', 'stretch'
borderBottomWidth
定义底部线条的宽度 可取值:字符串或者数字 推荐字符串 比如 :'1rem'
borderLeftWidth
定义左边线条的宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
http://g.alicdn.com/nuke/doc/chapter7/borderRightWidth
定义右边线条的宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
borderTopWidth
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
作用: 定义顶部线条的宽度
borderWidth
定义所有线条的宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
bottom
定义距离底部的距离, 在元素的position为absolute时生效
可取值:字符串或者数字 推荐字符串 比如 :'1rem' 或者百分比
flex
控制元素是否为flex占位,和flexDirection配合使用,flexDirection为row时,子元素水平排列,为column的时候,子元素垂直排列,注意View默认会被加上flex: 1,flexDirection为column,效果是View不写任何style的时候, > 如果一个元素的父元素定义了flex为1,那么子元素再定义flex: 1的时候,那么这个flex就是控制自己占的百分比,比如3个都是flex为1,那么3个元素都是占比1/3,如果是1: 2: 1,那么占比就是1/4,2/4,1/4。
可取值: 数字
flexWrap
控制子元素排列是否换行
可取值: 'wrap', 'nowrap'
height
定义高度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
left
定义左边宽度,当position为absolute时生效
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
margin
定义边距
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
marginBottom
定义底部边距 可取值:字符串或者数字 推荐字符串 比如 :'1rem'
marginHorizontal()(支持性待定)
定义水平的边距,左边和右边
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
marginLeft
定义左边距
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
marginRight
定义右边距
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
marginTop
定义顶部边距
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
marginVertical(支持性待定)
定义垂直边距,顶部和底部
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
maxHeight
最大高度
可取值:字符串或者数字 推荐字符串 比如 :'1rem' ,百分比
maxWidth
最大宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem' ,百分比
minHeight
最低高度
可取值:字符串或者数字 推荐字符串 比如 :'1rem' ,百分比
minWidth
最低宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem' ,百分比
padding
定义填充宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
paddingBottom
定义底部填充宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
paddingHorizontal(支持性待定)
定义水平填充宽度 左边和右边
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
paddingLeft
定义左边填充宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
paddingRight
定义右边填充宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
paddingTop
定义顶部填充宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
paddingVertical(支持性未知)
定义垂直填充宽度,顶部和底部
可取值:字符串或者数字 推荐字符串 比如 :'1rem'
position
控制定位,需要层叠元素的时候一般用absolute
可取值:'absolute', 'relative', 'fixed', 'sticky' 默认值: relative
right
定义右边的距离,当position为absolute时才有效
可取值:字符串或者数字 推荐字符串 比如 :'1rem' ,百分比
top
定义顶部的距离,当position为absolute时才有效
可取值:字符串或者数字 推荐字符串 比如 :'1rem' ,百分比
width
定义宽度
可取值:字符串或者数字 推荐字符串 比如 :'1rem' ,百分比
zindex
层叠元素时,控制层的叠加顺序
可取值: 数字