# Col

列组件

- 搭配Row行组件可实现自适应宽度布局。
- 可通过align定义单个项目在交叉轴上的对齐方式, 可选auto、top、bottom、center。
- 可通过width设置单个项目宽度的百分比, 目前支持5-100之间5的倍数、33（1\3）和66(2\3)。
- 可通过offset设置单个项目左边外边距。

主要属性和接口：

- align:单个项目在交叉轴上的对齐方式, 默认auto

        <Row>
            <Col align="top">
                <div className="col-demo">top</div>
            </Col>
            <Col align="center">
                <div className="col-demo">center</div>
            </Col>
            <Col align="bottom">
                <div className="col-demo">bottom</div>
            </Col>
        </Row>

- width:单个项目的宽度百分比

        <Row>
            <Col width="15">
                <div className="col-demo">15</div>
            </Col>
        </Row>

- offset:单个项目的偏移值,即左边外边距

        <Row>
            <Col width="20" offset="10">
                <div className="col-demo">10</div>
            </Col>
        </Row>

### 方法

### 属性

- align
- classPrefix
- offset
- width

### 事件

Extends Component
Defined in: `src/Col.js:5`
Module: 布局组件

Available since 0.1.0

## Constructor

### Col

`Col ()`

Defined in `src/Col.js:5`

Available since 0.1.0

#### Example:

    import React, { Component } from "react";
    import {Grid,Row,Col} from "phoenix-ui";
    import Code from "./code/code";

    export default class grid extends Component {

        render(){
            return(
                <div>
                    <h2 className="comp-title">Grid</h2>
                    <h3 className="comp-type"><strong>Row</strong></h3>
                    <h3 className="comp-type">align(默认stretch) 容器属性</h3>
                    <div className="content">
                        <h3 className="comp-tip">stretch</h3>
                        <Grid>
                            <Row align="stretch">
                                <Col>
                                    <div className="col-demo">stretch</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">stretch<br />baseline</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">stretch<br />stretch<br />stretch</div>
                                </Col>
                            </Row>
                        </Grid>
                        <h3 className="comp-tip">baseline</h3>
                        <Grid>
                            <Row align="baseline">
                                <Col>
                                    <div className="col-demo">baseline</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">baseline<br />baseline</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">baseline<br />baseline<br />baseline</div>
                                </Col>
                            </Row>
                        </Grid>
                        <h3 className="comp-tip">top</h3>
                        <Grid>
                            <Row align="top">
                                <Col>
                                    <div className="col-demo">top</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">top<br />top</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">top<br />top<br />top</div>
                                </Col>
                            </Row>
                        </Grid>
                        <h3 className="comp-tip">bottom</h3>
                        <Grid>
                            <Row align="bottom">
                                <Col>
                                    <div className="col-demo">bottom</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">bottom<br />bottom</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">bottom<br />bottom<br />bottom</div>
                                </Col>
                            </Row>
                        </Grid>
                        <h3 className="comp-tip">center</h3>
                        <Grid>
                            <Row align="center">
                                <Col>
                                    <div className="col-demo">center</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">center<br />center</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">center<br />center<br />center</div>
                                </Col>
                            </Row>
                        </Grid>
                    </div>
                    <Code target="row-align" />

                    <h3 className="comp-type"><strong>Col</strong></h3>
                    <h3 className="comp-type">align(默认auto) 项目属性</h3>
                    <div className="content">
                        <h3 className="comp-tip">auto</h3>
                        <Grid>
                            <Row>
                                <Col>
                                    <div className="col-demo">auto</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">auto auto</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">auto auto auto auto</div>
                                </Col>
                            </Row>
                        </Grid>
                        <h3 className="comp-tip">top/center/bottom</h3>
                        <Grid>
                            <Row>
                                <Col align="top">
                                    <div className="col-demo">top</div>
                                </Col>
                                <Col align="center">
                                    <div className="col-demo">center</div>
                                </Col>
                                <Col align="bottom">
                                    <div className="col-demo">bottom</div>
                                </Col>
                                <Col>
                                    <div className="col-demo">top<br />center<br />bottom</div>
                                </Col>
                            </Row>
                        </Grid>
                    </div>
                    <Code target="col-align" />

                    <h3 className="comp-type">width 设置项目宽度百分比</h3>
                    <div className="content">
                        <Grid>
                            <Row>
                                <Col width="15">
                                    <div className="col-demo">15</div>
                                </Col>
                                <Col width="20">
                                    <div className="col-demo">20</div>
                                </Col>
                                <Col width="25">
                                    <div className="col-demo">25</div>
                                </Col>
                                <Col width="40">
                                    <div className="col-demo">40<br />40<br />40</div>
                                </Col>
                            </Row>
                        </Grid>
                    </div>
                    <Code target="col-width" />

                    <h3 className="comp-type">offset(即margin-left) 偏移值</h3>
                    <div className="content">
                        <Grid>
                            <Row>
                                <Col width="20" offset="10">
                                    <div className="col-demo">10</div>
                                </Col>
                                <Col width="40" offset="10" >
                                    <div className="col-demo">10<br />10<br />10</div>
                                </Col>
                            </Row>
                        </Grid>
                    </div>
                    <Code target="col-offset" />
                </div>
            )
        }
    }

## 属性

### `align`

Integer

Defined in `src/Col.js:75`

竖直方向的排列是靠上、居中还是靠下

### `classPrefix`

String

Defined in `src/Col.js:56`

样式前缀

Default:

`'col'`

### `offset`

Integer

Defined in `src/Col.js:69`

偏移多少，目前支持5-100之间5的倍数、33（1\3）和66(2\3)，默认不偏移

### `width`

Integer

Defined in `src/Col.js:63`

占100份的多少份，目前支持5-100之间5的倍数、33（1\3）和66(2\3)