# @huteming/ui-flex-item

> Flex 是 CSS flex 布局的一个封装

Latest version **1.2.1-alpha.0** (published 2019-02-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install @huteming/ui-flex-item
pnpm add @huteming/ui-flex-item
yarn add @huteming/ui-flex-item
bun add @huteming/ui-flex-item
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1-alpha.0 |
| Published | 2019-02-18 |
| First published | 2019-02-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | huteming |

## Links

- npm: https://www.npmjs.com/package/@huteming/ui-flex-item
- npm.io page: https://npm.io/package/@huteming/ui-flex-item

## Recent versions

- 1.2.1-alpha.0 (latest) — 2019-02-18
- 1.1.4-alpha.0 — 2019-02-15
- 1.1.3-alpha.0 — 2019-02-14
- 1.1.2 — 2019-02-13
- 1.1.1 — 2019-02-12
- 1.0.1 — 2019-02-12

## README

# Flex 是 CSS flex 布局的一个封装。

-------------

## 例子

```javascript
import { Flex, FlexItem } from 'tommy-ui'

Vue.component(Flex.name, Flex)
Vue.component(FlexItem.name, FlexItem)
```

```html
<base-flex>
    <base-flex-item>内容</base-flex-item>
</base-flex>
```

## API

### Flex

属性 | 说明 | 类型 | 默认值
-----|-----|------|------
| direction    | 项目定位方向，值可以为 `row`,`row-reverse`,`column`,`column-reverse`    | String | `row` |
| wrap         | 子元素的换行方式，可选 `nowrap`, `wrap`, `wrap-reverse` | String  | `nowrap` |
| justify      | 子元素在主轴上的对齐方式，可选 `start`, `end`, `center`, `between`, `around` | String | `start` |
| align        | 子元素在交叉轴上的对齐方式，可选 `start`, `center`, `end`, `baseline`, `stretch` | String   | `center` |
| alignContent | 有多根轴线时的对齐方式，可选 `start`, `center`, `end`, `between`, `around`, `stretch`    | String  | `stretch` |
| gutter | 子元素水平方向的间距 | String | `0px` |

### Flex.Item

|属性 | 说明 | 类型 | 默认值 |
|----|----|----|----|
| order | 项目的排列顺序 | Number | `0` |
| grow | 项目的放大比例 | Number | `1` |
| shrink | 项目的缩小比例 | Number | `1` |
| basis | 分配多余空间之前，项目占据的主轴空间 | String | `auto` |
| align | 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 可选 `auto`, `start`, `center`, `end`, `baseline`, `stretch` | String | `auto` |

---
_Source: https://npm.io/package/@huteming/ui-flex-item · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._