milkui-flex v0.1.0

milkui-flex

Flexible 布局组件

Overview

Example

import Flex from 'milkui-flex';

const { Item } = Flex;

<h3 className="demo-list-title">列等分</h3>
<div className="demo-list">
  <Flex className="demo-item">
    <Item><PlaceHolder /></Item>
    <Item><PlaceHolder /></Item>
    <Item><PlaceHolder /></Item>
  </Flex>
</div>
<h3 className="demo-list-title">每行固定列</h3>
<div className="demo-list">
  <Flex className="demo-item" wrap={'wrap'}>
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
  </Flex>
</div>
<h3 className="demo-list-title">轴对齐</h3>
<div className="demo-list">
  <Flex className="demo-item" justify={'center'}>
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
  </Flex>
  <Flex className="demo-item" justify={'end'}>
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
    <PlaceHolder className="box-quarter" />
  </Flex>
</div>

Properties

Develop

cnpm i milk-dev -g    # dev tool

cnpm install

npm start

Links

• Issues