Nomnom Pumpernickle Muffins
    Have ideas to improve npm?Join in the discussion! »

    flex-auto

    2.0.7 • Public • Published

    flex-auto

    轻量级,flex布局,全方位自适应宽高

    demo演示

    https://liuhaifengzzzzz.github.io/flex-auto

    npm

    npm i flex-auto --save
     
    cnpm i flex-auto --save

    vue

    import Vue from "vue";
     
    import flexAuto from 'flex-auto';
    Vue.use(flexAuto);

    使用方法

    <!-- 基础用法 -->
    <v-flex>
      <v-flex>1</v-flex>
      <v-flex>2</v-flex>
    </v-flex>
     
    <!-- v-flex高宽自动适应 -->
    <v-flex>
      <div>1</div>
      <v-flex>2</v-flex>
    </v-flex>
     
    <!-- 行布局 -->
    <v-row>
      <v-flex>1</v-flex>
      <v-flex>2</v-flex>
    </v-row>
     
    <!-- 列布局 -->
    <v-col>
      <v-flex>1</v-flex>
      <v-flex>2</v-flex>
    </v-col>
     
    <!-- 居中布局 -->
    <v-center>
      justify-content:center && align-items:center
    </v-center>
     
    <!-- 4 * 4 -->
    <v-row>
      <v-col>
        <v-flex>1</v-flex>
        <v-flex>2</v-flex>
      </v-col>
      <v-col>
        <v-flex>3</v-flex>
        <v-flex>4</v-flex>
      </v-col>
    </v-row>
     
    <!-- 4 * 4 -->
    <v-col>
      <v-row>
        <v-flex>1</v-flex>
        <v-flex>2</v-flex>
      </v-row>
      <v-row>
        <v-flex>3</v-flex>
        <v-flex>4</v-flex>
      </v-row>
    </v-col>
     
    <!-- 列宽默认等分 -->
    <v-flex>
      <v-flex>1份</v-flex>
      <v-flex>1份</v-flex>
    </v-flex>
     
    <!-- 列宽不等分 -->
    <v-flex>
      <v-flex>1份</v-flex>
      <v-flex :span="2">2份</v-flex>
    </v-flex>
     
    <v-flex>
      <v-flex :span="3">3份</v-flex>
      <v-flex :span="4">4份</v-flex>
    </v-flex>
     
    ...

    v-row && v-col && v-flex && v-center

    props: {
      span: {
        // 栅格份数 默认均分
        type: Number,
        default: 1,
      },
      type: {
        // flex inline-flex block
        type: String,
        default: "flex",
      },
      direction: {
        // flex-direction: row | row-reverse | column | column-reverse;
        type: String,
        default: "",
      },
      wrap: {
        // flex-wrap: nowrap | wrap | wrap-reverse;
        type: String,
        default: "",
      },
      justify: {
        // justify-content: flex-start | flex-end | center | space-between | space-around;
        type: String,
        default: "",
      },
      align: {
        // align-items: flex-start | flex-end | center | baseline | stretch;
        type: String,
        default: "",
      },
      // 栅格间隔,同padding设置
      gutter: [String, Array],
      // 固定容器宽高,默认自适应,如果子元素过多撑开父元素,可设成true
      fixed: {
        type: Boolean,
        default: false,
      }
    }

    See Configuration Reference.

    Install

    npm i flex-auto

    DownloadsWeekly Downloads

    1

    Version

    2.0.7

    License

    ISC

    Unpacked Size

    9.29 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar