介绍
Vue-Layouts 是一个基于 Vue.js 的 UI 布局库，它提供了多种灵活的布局方式，支持栅格布局、Flex 布局以及自定义布局。使用 Vue-Layouts 可以快速开发出各种复杂的网页布局。
安装
可以使用 npm 安装 vue-layouts：
npm install --save vue-layouts
使用
在引入 vue-layouts 后，可以使用其中的组件来完成不同的布局。
栅格布局
栅格布局是一种常用的布局方式。Vue-Layouts 提供了 GridRow 和 GridColumn 两个组件来快速实现栅格布局。
GridRow
GridRow 组件用于定义一个栅格行，用法如下：
<grid-row> <!-- 列组件 --> </grid-row>
GridColumn
GridColumn 组件用于定义一个栅格列，用法如下：
<grid-column :col-xs="12" :col-sm="6" :col-md="4" :col-lg="3"> <!-- 内容部分 --> </grid-column>
其中，:col-xs、:col-sm、:col-md 和 :col-lg 分别表示不同屏幕宽度下所占的栅格数。
例如，:col-xs="12" 表示在移动设备下展示时，该列所占用的总栅格数为 12，即该列占据整个栅格行的宽度；:col-md="4" 表示在中等宽度屏幕下展示时，该列占据栅格行宽度的 1/3。
Flex 布局
Vue-Layouts 还支持 Flex 布局。Flex 布局是一种强大的布局方式，可以轻松灵活地实现各种布局效果。
FlexRow
FlexRow 组件用于定义一个 Flex 布局行，用法如下：
<flex-row :align="center"> <!-- 子元素 --> </flex-row>
其中，:align 属性用于定义子元素在垂直方向上的对齐方式，可以设置的值有 top、center 和 bottom，分别表示顶部对齐、居中对齐和底部对齐。
FlexColumn
FlexColumn 组件用于定义一个 Flex 布局列，用法如下：
<flex-column :span="6"> <!-- 内容部分 --> </flex-column>
其中，:span 属性用于设置该列占用父容器总宽度的比例，取值范围为 1-12。
自定义布局
Vue-Layouts 还支持自定义布局，可以使用自定义宽度设置和定位操作来实现各种布局效果。
CustomRow
CustomRow 组件用于定义一个自定义布局行，用法如下：
<custom-row> <!-- 子元素 --> </custom-row>
CustomColumn
CustomColumn 组件用于定义一个自定义布局列，用法如下：
<custom-column :width="50" :left="-10"> <!-- 内容部分 --> </custom-column>
其中，:width 属性用于设置该列的宽度，单位为 px；:left 属性用于设置该列距离左侧边框的偏移量，单位为 px。
示例代码
下面是一个简单的栅格布局示例：
-- -------------------- ---- -------
----------
-----
----------
------------ ------------ ----------- ------------
---- ---------------------
--------------
------------ ------------ ----------- ------------
---- ---------------------
--------------
------------ ------------ ----------- ------------
---- ---------------------
--------------
-----------
------
-----------
-------
------ -
----------------- -----
-
------ -
----------------- -----
-
------ -
----------------- -----
-
--------另外，Vue-Layouts 官方文档中也提供了丰富的示例代码，可以参考学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557fc81e8991b448d5178