在前端开发中，布局是非常重要的一环。为了达到灵活和响应式布局的效果，我们通常会使用 CSS 框架和库，如 Bootstrap 和 Foundation。但如果你只是想用一些简单的弹性盒子布局，使用这些大而全的框架显然是过杀之举。这时候 vue-flexboxgrid 就是一个非常不错的选择。
什么是 vue-flexboxgrid
vue-flexboxgrid 是一个基于 CSS3 弹性盒子布局（Flexbox）的栅格系统，专为 Vue.js 应用程序设计。它基于 Facebook 的 flexboxgrid.css 修改而来，具有较高的代码质量和易用性。
它不依赖于 jQuery，Bootstrap 或其他类似的框架，可以快速轻松地生成栅格化布局，满足你的大多数需求。
安装和使用
vue-flexboxgrid 可以通过 npm 安装和使用。假设你已经在 Vue.js 应用程序中安装了 npm 包管理器，那么可以通过以下方式安装 vue-flexboxgrid：
npm install vue-flexboxgrid --save
安装完成后，在 Vue.js 应用的 main.js 文件中引入 vue-flexboxgrid：
import VueFlexboxgrid from 'vue-flexboxgrid'; Vue.use(VueFlexboxgrid);
现在，你可以在 Vue.js 应用程序中使用 vue-flexboxgrid 的栅格化布局了。
栏（Column）
vue-flexboxgrid 的栏（Column）组件非常易于使用，你只需添加一个属性即可：
<vue-flex-row>
<vue-flex-col xs="12" sm="6" md="4" lg="3">
<!-- Your content goes here -->
</vue-flex-col>
</vue-flex-row>这里的 xs、sm、md 和 lg 是标准的响应式断点，分别对应于 extra small、small、medium 和 large 屏幕。如果你不使用某一断点，可以省略它（详见下一节）。
你可以在同一行中使用多个列，vue-flexboxgrid 会缩小它们，使它们能够放在同一行：
-- -------------------- ---- -------
--------------
------------- ------- ------ ------ -------
---- ---- ----- ------ ---
---------------
------------- ------- ------ ------ -------
---- ---- ------ ------ ---
---------------
------------- ------- ------ ------ -------
---- ---- ----- ------ ---
---------------
------------- ------- ------ ------ -------
---- ---- ------ ------ ---
---------------
---------------偏移（Offset）
如果你想对栏进行偏移，vue-flexboxgrid 也提供了简单的方法：
<vue-flex-row>
<vue-flex-col xs="12" sm="8" sm-offset="2">
<!-- Your content goes here -->
</vue-flex-col>
</vue-flex-row>这里的 sm-offset 属性值指定了在 small 屏幕上栏向右偏移 2 格。
排序（Order）
如果你想在不同的屏幕尺寸上改变栏的顺序，vue-flexboxgrid 也提供了相应的属性：
<vue-flex-row>
<vue-flex-col md-order="2" xs="12" md="6">
<!-- Your first column -->
</vue-flex-col>
<vue-flex-col md-order="1" xs="12" md="6">
<!-- Your second column -->
</vue-flex-col>
</vue-flex-row>这里的 md-order 属性值指定了在 medium 屏幕上第一个栏的顺序是第二个，第二个栏的顺序是第一个。
换行
如果你希望多个栏换到下一行，你可以这样做：
-- -------------------- ---- -------
------------- -----
------------- ------- ------ ------ -------
---- ---- ----- ------ -- --- ----- --- ---
---------------
------------- ------- ------ ------ -------
---- ---- ------ ------ -- --- ----- --- ---
---------------
------------- ------- ------ ------ -------
---- ---- ----- ------ -- --- ------ --- ---
---------------
------------- ------- ------ ------ -------
---- ---- ------ ------ -- --- ------ --- ---
---------------
---------------这里的 wrap 属性值使得当一行中的栏超出了容器的宽度时，它们会自动换行。
嵌套
你也可以在栏内部嵌套 vue-row 和 vue-col 组件来构建更复杂的布局：
-- -------------------- ---- -------
--------------
------------- ------- -------
--------------
------------- ------- -------
---- ---- ----- ------ ------ ---
---------------
------------- ------- -------
---- ---- ------ ------ ------ ---
---------------
---------------
---------------
------------- ------- -------
---- ---- ------ ------ ---
---------------
---------------这里的第一列是横跨所有设备尺寸的 12 列，其 Medium 屏幕上的子列分别占用 8 和 4 列。
总结
vue-flexboxgrid 是一个基于 CSS3 弹性盒子布局（Flexbox）的栅格系统，其使用非常简单和直观，还提供了列、偏移、排序、换行和嵌套等强大的功能，能够保证你在前端布局方面取得更加灵活开发体验。
如果你想深入学习和使用弹性盒子布局（Flexbox），可以查看 Flexbox 布局指南。
代码示例：
-- -------------------- ---- -------
----------
------------- -----
------------- ------- ------ ------ -------
---- -------------
---- ---------------------------------- ---------------- -------
-------- ------
------- ------ ---- ----- ---- ---------
------
---------------
------------- ------- ------ ------ -------
---- -------------
---- ---------------------------------- ---------------- -------
-------- ------
------- ------ ---- ----- ---- ---------
------
---------------
------------- ------- ------ ------ -------
---- -------------
---- ---------------------------------- ---------------- -------
-------- ------
------- ------ ---- ----- ---- ---------
------
---------------
------------- ------- ------ ------ -------
---- -------------
---- ---------------------------------- ---------------- -------
-------- ------
------- ------ ---- ----- ---- ---------
------
---------------
---------------
-----------
------ -------
----- -
-------- -----
------- --- ----- -----
-------------- ----
----------- -------
----------------- --------
-
----- -- -
---------- -----
----------- -----
-
----- - -
---------- -----
----------- ----
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596681e8991b448d6e57