Usage no npm install needed!

<script type="module">
  import vFlex from 'https://cdn.skypack.dev/v-flex';
</script>

README

v-flex

a flex layout component for vue

Install

npm install v-flex

Usage

  import {vCol,vRow} from 'v-flex';

  Vue.component(vCol.name, vCol);
  Vue.component(vRow.name, vRow);

  <v-row class="test">
    <v-col span="6" push="18">NO1. span 6 push 18</v-col>
    <v-col span="18" pull="6">NO2. span 18 pull 6</v-col>
  </v-row>

Row

<v-row class="test" align="top" justify="start">
  //
</v-row>

  align (垂直对齐方式): top / middle / bottom
  justify (水平对齐方式): start / end / center / space-around / space-between

Col

 <v-col span="6" push="18">
  //
 </v-col>

span (栅格数) : 1-24
push (向右移动格数) : 1-24
pull (向左移动格数) : 1-24
order (栅格顺序) : number