# OPLayout 布局组件

```
top、left、right、bottom 可以决定其父容器的布局
但是容器的布局优先级  props ver > top、left、right、bottom计算 > 默认（hoz）

容器的子项 除了在布局方向有一定的分割逻辑，  其在另一个方向都是自动铺满的
分割逻辑是 prop size 固定大小 > 默认逻辑 【 top、left、right、bottom默认是自动随内容撑开，  content或者随意写的div 都是自动获取剩余空间 】

interval={5}
子元素之间就会有间隔
```

```jsx
import React, { useState } from 'react';
import { Button, Icon } from '@alife/cn-ui';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { OPLayout, OPCard } from '../src/view';

const { Top, Bottom, Left, Right, Content } = OPLayout;

const TestOPLayout = () => {
  return (
    <div>
      <div style={{ height: 600, backgroundColor: 'red' }}>
        <OPLayout>
          <Top size={40} middle center>
            我是顶部
          </Top>
          <Content size={12}>我是中间1</Content>
          <Content interval={5}>
            <Left
              style={{ backgroundColor: 'yellow' }}
              size={150}
              middle
              center
            >
              2 content left
            </Left>
            <Content style={{ backgroundColor: 'yellow' }} center middle>
              2 content content
            </Content>
            <Content style={{ backgroundColor: 'yellow' }} center middle>
              2 content content
            </Content>
            <Right style={{ backgroundColor: 'yellow' }} size={150} middle>
              2 content right
            </Right>
          </Content>
          <Bottom size={100} middle center>
            <div>我是底部</div>
          </Bottom>
        </OPLayout>
      </div>
      <div>
        <OPLayout style={{ height: 600, backgroundColor: '#532389' }}>
          <Top style={{ color: '#fff' }} middle center size={88}>
            间隔使用的案例
          </Top>
          <Content interval={10} hoz>
            <Content
              interval={2}
              arrange={4}
              arrangeInterval={3}
              style={{ background: 'yellow' }}
            >
              <Content style={{ background: 'green' }}>1</Content>
              <Content style={{ background: 'green' }}>2</Content>
              <Content style={{ background: 'green' }}>3</Content>
              <Content style={{ background: 'green' }}>4</Content>
              <Content style={{ background: 'green' }}>5</Content>
              <Content style={{ background: 'green' }}>6</Content>
            </Content>
            <Content interval={10} style={{ background: 'yellow' }}>
              <Top style={{ background: 'red' }} center middle>
                右头
              </Top>
              <Content style={{ background: 'red' }} center middle>
                右身子
              </Content>
              <Bottom style={{ background: 'red' }} center middle>
                右底
              </Bottom>
            </Content>
          </Content>
          <Content interval={10} hoz>
            <Content interval={2} arrange={4} style={{ background: 'yellow' }}>
              <div style={{ background: 'green', marginBottom: 2 }}>1</div>
              <div style={{ background: 'green', marginBottom: 2 }}>2</div>
              <div style={{ background: 'green', marginBottom: 2 }}>3</div>
              <div style={{ background: 'green', marginBottom: 2 }}>4</div>
              <div style={{ background: 'green', marginBottom: 2 }}>5</div>
              <div style={{ background: 'green', marginBottom: 2 }}>6</div>
            </Content>
            <Content interval={10} style={{ background: 'yellow' }}>
              <Top style={{ background: 'red' }} center middle>
                右头
              </Top>
              <Content style={{ background: 'red' }} center middle>
                右身子
              </Content>
              <Bottom style={{ background: 'red' }} center middle>
                右底
              </Bottom>
            </Content>
          </Content>
        </OPLayout>
      </div>
    </div>
  );
};

ReactDOM.render(<TestOPLayout />, mountNode);
```

```css

```