6.5 flex布局

优质
小牛编辑
127浏览
2023-12-01

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

层叠元素时,控制层的叠加顺序

可取值: 数字