flexbox-vue

flexbox-vue

A Vue Component to flexbox

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Usage

Install it via npm:

• npm install -S flexbox-vue

Example

1. Global import

import Flexbox from 'flexbox-vue'
Vue.use(Flexbox);

1. Use it

<FlexboxContainer orient="vertical">
    <FlexboxItem grow="1">
      <p>demo1</p>
    </FlexboxItem>
    <FlexboxItem>
      <p>demo2</p>
    </FlexboxItem>
</FlexboxContainer>

Props

FlexboxContainer

• gutter Spacing between items, Unit is px
  • type: Number,
  • default: 8
• orient (flex-direction)
  • type: String,
  • default: 'horizontal'
  • options: 'horizontal' || 'vertical'
• justify:
  • type: String
  • default: 'flex-start'
  • options: 'flex-start' || 'flex-end' || 'center' || 'space-between' || 'space-around'
• align:
  • type: String
  • default: flex-start
  • options: 'flex-start' || 'flex-end' || 'center' || 'baseline' || 'stretch'

FlexboxItem

• grow (flex-grow)
  • type: Number
  • default: 0
• shrink (flex-shrink)
  • type: Number
  • default: 1
• basis (flex-basis)
  • type: Number | String
  • default: 'auto'
  • options: | 'auto'
• order (order)
  • type: Number
  • default: 0