rc-flex-layout

基于react和flex的快速布局方式，只需要简单配置就可

安装

npm install rc-flex-layout

使用

import { HView, VView } from 'rc-flex-layout';

<HView gap={50}>
    <HView width={100} height="100px" bgColor="red" hAlign="center" onClick={this.handleClick.bind(this)}>100</HView>
    <VView width={200} height={200} padding={20} bgColor="blue" gap={10}>
        <div>a</div>
        <div>b</div>
    </VView>
    <HView width={300} height={300} bgColor="green">300</HView>
</HView>

API

公共部分

| 字段 | 说明 | 类型 | 默认值 | | -------- | ------ | ------------------------- | -------------------- | | width | 宽度 | string ｜ number | - | | height | 高度 | string ｜ number | - | | gap | 间隔 | string ｜ number | - | | padding | 内间距 | string ｜ number | - | | flex | 缩放自动布局 | string ｜ number ｜ boolean | | | overflow | 超出展示 | string | auto|hidden|scroll | | bgColor | 背景色 | string | - |

HView

| 字段 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ | ------------------------------------------------------ | | hAlign | 横向内容展示 | string | flex-start｜flex-end｜center｜ space-between｜space-around | | vAlign | 纵向内容展示 | string | flex-start｜ flex-end｜ center｜ baseline｜ stretch |

VView

| 字段 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ | --------------------------------------------------------- | | hAlign | 横向内容展示 | string | flex-start｜ flex-end｜ center｜ baseline｜ stretch | | vAlign | 纵向内容展示 | string | flex-start｜flex-end｜center｜    space-between｜space-around |