# vue-layout-flex

> vue-layout-flex是一个flex布局系统，它使布局与表现分开，在vue的模板中进行布局甚至设置元素大小，剩下的工作只需要在css中写好表现样式。

Latest version **0.1.5** (published 2020-06-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-layout-flex
pnpm add vue-layout-flex
yarn add vue-layout-flex
bun add vue-layout-flex
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2020-06-16 |
| First published | 2020-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 52.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | suahyl |
| Keywords | vue, flex, layout, directive |

## Links

- npm: https://www.npmjs.com/package/vue-layout-flex
- Repository: https://github.com/songhuige/vue-layout-flex
- Homepage: https://github.com/songhuige/vue-layout-flex#readme
- Issues: https://github.com/songhuige/vue-layout-flex/issues
- npm.io page: https://npm.io/package/vue-layout-flex

## Recent versions

- 0.1.5 (latest) — 2020-06-16
- 0.1.4 — 2020-06-16
- 0.1.3 — 2020-06-15

## README

# vue-layout-flex

vue-layout-flex是一个flex布局系统，它使布局与表现分开，在vue的模板中进行布局甚至设置元素大小，剩下的工作只需要在css中写好表现样式。


### 安装

#### npm    
npm install vue-layout-flex --save

#### yarn    
yarn add vue-layout-flex


#### 在 main.js 中。

```javascript
import VueLayoutFlex from 'vue-layout-flex';
import 'vue-layout-flex/lib/styles/layout-flex.css';

Vue.use(VueLayoutFlex)

``` 


### 使用

```html
<div
    v-row
    layout="between center"
    wrap="between"
    v-col-flow:200:500="0"
>
    <div v-row-flow:80:80="0"></div>
    <div v-row-flow:50:50="0"></div>
    <div
        v-row
        layout="center center"
        v-row-flow:50::30-80:40-60="1"
        v-self:stretch
    >
        center
    </div>
    <div v-row-flow:50:50="0" v-self:end></div>
    <div v-row-flow:50:50="0" v-self:start></div>
    <div v-row-flow:50="0" v-self:stretch></div>
    <div v-row-flow:50:50="0" v-self:center></div>
    <div v-row-flow:50:50="0"></div>
    <div v-row-flow:50:50="0"></div>
    <div v-row-flow:50:50="0"></div>
    <div v-row-flow:50:50="0"></div>
</div>
```


### 文档

#### 容器指令

##### v-row | v-col | v-row-rvs | v-col-rvs

v-row等同于
```css
    display:flex;
    flex-direction: row;
```
v-row-rvs等同于
```css
    display:flex;
    flex-direction: row-reverse;
```

v-col等同于
```css
    display:flex;
    flex-direction: column;
```

v-col等同于
```css
    display:flex;
    flex-direction: column-reverse;
```

#### 容器属性。

##### layout="justify-content align-items"
- justify-content参数支持5个值: center、end、start、between、around。
1. center:center,
2. end: flex-end,
3. start: flex-start,
4. between: space-between,
5. around: space-around,

- align-items参数支持5个值：center、start、end、stretch、baseline。

1. center: center,
2. start: flex-start,
3. end: flex-end,
4. stretch: stretch,
5. baseline: baseline,

##### wrap="align-content rvs"

- align-content参数支持六个值：center、end、start、between、around、stretch
1. center: center,
2. end: flex-end, 
3. start: flex-start, 
4. between: pace-between,
5. around: space-around, 
6. stretch: stretch

- rvs 非必须的参数。
它的作用等同于flex-wrap: wrap-reverse。

#### 子项指令

##### v-self="align-self"

- align-self参数和 layout的align-items参数一样。


##### v-row-flow:basis:cross:mainMin-mainMax:crossMin-crossMax="grow-shrink"

必须在 v-row 和 v-row-rvs容器中中使用

- basis: 主轴宽度。
- cross: 纵轴宽度。
- mainMin: 主轴最大宽度。
- mainMax: 纵轴最小宽度。
- crossMin: 主轴最大宽度。
- crossMax: 纵轴最小宽度。
- grow: flex-grow
- shrink: flex-shrink

``` html
 <div v-row-flow:300:200:200-400:100-300="1-1"></div>
```
等同于
``` css
flex-flow: 300 1 1;
min-width:200px;
max-width:400px;
min-height: 100px;
max-height: 300px;
```

以下写法都合法
```html
    <div v-row-flow:300="1"></div>
    <div v-row-flow:300::100-300></div>
    <div v-row-flow::::100-300="1-1"></div>
```

##### v-col-flow:basis:cross:mainMin-mainMax:crossMin-crossMax="grow-shrink"

必须在 v-col 和 v-col-rvs容器中使用

- basis: 主轴宽度。
- cross: 纵轴宽度。
- mainMin: 主轴最大宽度。
- mainMax: 纵轴最小宽度。
- crossMin: 主轴最大宽度。
- crossMax: 纵轴最小宽度。
- grow: flex-grow
- shrink: flex-shrink

### 注意

v-row-flow 和 v-col-flow的参数对应的都是主轴纵轴而不是宽和高。

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