flexbox_Flexbox网格系统

flexbox

VueFlex (VueFlex)

A flexbox grid system.

flexbox网格系统。

View demo 查看演示 Download Source 下载源

建立 (setup)

npm (npm)

npm install @seregpie/vueflex

ES模块 (ES module)

Register the components globally.

全局注册组件。

import Vue from 'vue';
import VueFlex from '@seregpie/vueflex';

Vue.use(VueFlex);

or

要么

Register the components in the scope of another instance.

在另一个实例的范围内注册组件。

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 will be registered automatically.

如果检测到Vue，组件将自动注册。

用法 (usage)

<vue-flex-box
  wrap
  justify-content="space-between"
  align-items="center"
  :spacing="16"
>
  <vue-flex-item><!--...--></vue-flex-item>
  <vue-flex-item><!--...--></vue-flex-item>
</vue-flex-box>

---

---

Nested boxes inherit spacing from their parent.

嵌套框从其父级继承间距。

<vue-flex-box :spacing="8">
  <vue-flex-item style="width: 100px;"><!--...--></vue-flex-item>
  <vue-flex-box
    style="flex: 1;"
    direction-column
  >
    <vue-flex-item><!--...--></vue-flex-item>
    <vue-flex-item><!--...--></vue-flex-item>
  </vue-flex-box>
</vue-flex-box>

---

---

Provide any unit.

提供任何单位。

<vue-flex-box spacing="2em"><!--...--></vue-flex-box>

组件 (components)

VueFlexBox (VueFlexBox)

名称 (name)

vue-flex-box

vue-flex-box

属性 (properties)

property	type	default
tag	String	'div'
directionColumn	Boolean	false
reverseDirection	Boolean	false
wrap	Boolean	false
reverseWrap	Boolean	false
justifyContent	String	'flex-start'
alignItems	String	'stretch'
alignContent	String	'stretch'
spacing	[Number, String]	0

属性	类型	默认
tag	String	'div'
directionColumn	Boolean	false
reverseDirection	Boolean	false
wrap	Boolean	false
reverseWrap	Boolean	false
justifyContent	String	'flex-start'
alignItems	String	'stretch'
alignContent	String	'stretch'
spacing	[Number, String]	0

VueFlexItem (VueFlexItem)

名称 (name)

vue-flex-item

vue-flex-item

属性 (properties)

property	type	default
tag	String	'div'

属性	类型	默认
tag	String	'div'

翻译自: https://vuejsexamples.com/a-flexbox-grid-system/

flexbox