Flex

• category: Layout
• chinese: flex布局
• type: 布局

Nuke UI

设计思路

基于FLex做了控制指令简化，如'flex-direction'属性简化为'direction'。属性值也做了简化，如'justify-content'的值默认是'flex-start',则简化成start，其它属性值同理也简化了。

Flex和Flex.Item配合使用，快速构建布局的骨架。常见的均分、左右、定宽换行、基于X轴的左、中、右、离散布局，基于Y轴的上、中、下对齐都可以快速实现。

步骤：

• Flex构建一个通栏的容器，通过指令设置子元素的换行(默认不换行)，X轴，Y周对齐方式
• Flex.Item指定子元素的容器占宽比，默认均分
• 最后将Nuke的组件放到这些格子里面，并配合View通过Style做一些精细化的调整。

API

Flex

简化Flex布局，Flex的前缀不需要写，统一在代码里面代理，简化布局的代码量。

参数 | 说明 | 类型 | 可选值 | 默认值 -----|-----|-----|-----|----- direction | 对应flex-direction属性，决定主轴的方向（即项目的排列方向）,row（默认值）：主轴为水平方向，起点在左端。column：主轴为垂直方向，起点在上沿。 | String|'row','column'|row wrap | 对应flex-wrap属性，默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。 | String|'nowrap','wrap'| nowrap justify | 对应justify-content属性，定义了项目在主轴上的对齐方式。flex-start（默认值）：左对齐(start)，flex-end：右对齐(end)，center： 居中，space-between：两端对齐(center)，项目之间的间隔都相等。| String|'start','end','center','between'| start align | align-items属性,定义项目在交叉轴上如何对齐。flex-start：交叉轴的起点对齐(start)。flex-end：交叉轴的终点对齐(end)。center（默认值）：交叉轴的中点对齐。 |String |'start','end','center' |center others | 支持View参数的透传 | object/Function | |

Flex.Item

Flex.Item 组件默认加上了样式flex:1,保证所有 item 平均分宽度, Flex 容器的 children 不一定是 Flex.Item

demo

Flex布局

ListView

扫码体验：

使用方法

• 安装

// 切换到你的 rax 项目中
tnpm i nuke-flex --save

• 调用示例

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import {View,Text,Page} from 'nuke';
import Flex from 'nuke-flex';

const PlaceHolder = props => (
  <Text
    style={{
      backgroundColor: '#3089dc',
      color: '#ffffff',
      height: '80rem',
      lineHeight: '80rem',
      textAlign:'center'
    }}
    {...props}
  >Item</Text>
);

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
    }

    render() {
        return (
        <Page title="Flex布局">
               <Page.Intro main="说明" sub="基于Flex布局的简易封装，flex-direction默认row，flex-wrap默认nowrap，justify-content默认flex-start,align-items默认center。"/>
               <Page.Intro main="基本" sub="Item均分"/>
               <Flex>
                     <Flex.Item><PlaceHolder /></Flex.Item>
                     <Flex.Item><PlaceHolder /></Flex.Item>
               </Flex>

               <Page.Intro main="基本2" sub="Item的可以通过flex自有控制占比。"/>
               <Flex>
                     <Flex.Item flex={2}><PlaceHolder /></Flex.Item>
                     <Flex.Item flex={1}><PlaceHolder /></Flex.Item>
               </Flex>

               <Page.Intro main="wrap 换行" sub="子项目控制宽度，自适应换行。"/>
               <Flex wrap={'wrap'}>
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
               </Flex>

               <Page.Intro main="X轴对齐方式" sub="居左对齐"/>
               <Flex>
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
               </Flex>

               <Page.Intro main="X轴对齐方式" sub="居中对齐"/>
               <Flex justify="center">
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
               </Flex>

               <Page.Intro main="X轴对齐方式" sub="居右对齐"/>
               <Flex justify="end">
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
               </Flex>

               <Page.Intro main="X轴对齐方式" sub="离散等间距对齐"/>
               <Flex justify="between">
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline]} />
               </Flex>

               <Page.Intro main="Y轴对齐方式" sub="上对齐"/>
               <Flex align="start">
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline,styles.small]} />
                    <PlaceHolder style={[styles.inline]} />
               </Flex>

               <Page.Intro main="Y轴对齐方式" sub="中对齐"/>
               <Flex align="center">
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline,styles.small]} />
                    <PlaceHolder style={[styles.inline]} />
               </Flex>

               <Page.Intro main="Y轴对齐方式" sub="下对齐"/>
               <Flex align="end">
                    <PlaceHolder style={[styles.inline]} />
                    <PlaceHolder style={[styles.inline,styles.small]} />
                    <PlaceHolder style={[styles.inline]} />
               </Flex>


            </Page>
        );
    }
}

const styles = {
    inline:{
        width: '200rem',
        backgroundColor: '#3089dc',
        color: '#ffffff',
        height: '80rem',
        lineHeight: '80rem',
        textAlign:'center'
    },
    small:{
        width: '200rem',
        backgroundColor: '#3089dc',
        color: '#ffffff',
        height: '40rem',
        lineHeight: '40rem',
        textAlign:'center'
    }
}

render(<App/>);

其他

• bug、建议联系 @云易
• 钉钉交流群