VueFlex
A flexbox grid system.
demo
setup
npm
npm install @seregpie/vueflexRegister the components globally.
import Vue from 'vue';
import VueFlex from '@seregpie/vueflex';
Vue.use(VueFlex);or
Register the components in the scope of another component.
import VueFlex from '@seregpie/vueflex';
export default {
components: {
[VueFlex.Box.name]: VueFlex.Box,
[VueFlex.Item.name]: VueFlex.Item,
},
};browser
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vueflex"></script>If Vue is detected, the components are registered automatically.
usage
<vue-flex-box
align-items="center"
gap="16px"
justify-content="space-between"
wrap
>
<vue-flex-item><!--...--></vue-flex-item>
<vue-flex-item><!--...--></vue-flex-item>
</vue-flex-box>Nested boxes can inherit the gap from their parent.
<vue-flex-box gap="8px">
<vue-flex-item
style="width: 100px;"
><!--...--></vue-flex-item>
<vue-flex-box
direction-column
gap="inherit"
style="flex-grow: 1;"
>
<vue-flex-item><!--...--></vue-flex-item>
<vue-flex-item><!--...--></vue-flex-item>
</vue-flex-box>
</vue-flex-box>Provide any unit for the gap.
<vue-flex-box gap="2em"><!--...--></vue-flex-box>components
VueFlexBox
properties
| property | type | default |
|---|---|---|
alignContent |
String |
'stretch' |
alignItems |
String |
'stretch' |
directionColumn |
Boolean |
false |
gap |
String |
'0px' |
justifyContent |
String |
'flex-start' |
reverseDirection |
Boolean |
false |
reverseWrap |
Boolean |
false |
tag |
String |
'div' |
wrap |
Boolean |
false |
VueFlexItem
properties
| property | type | default |
|---|---|---|
tag |
String |
'div' |