介绍
@vivid-web/flexbox-grid-vue 是一个基于 Flexbox 的栅格系统组件。它提供了一种简单方便的方法来管理你的布局与组件，而且完全可以自定义各种属性，比如网格的数量、媒体查询和布局属性等等。
在本文中，我们将学习如何使用 @vivid-web/flexbox-grid-vue，并在 Vue.js 项目中生成响应式灵活的栅格系统。
安装
安装 @vivid-web/flexbox-grid-vue 很简单，只需要在终端窗口中输入以下命令即可:
npm install @vivid-web/flexbox-grid-vue
使用
在使用该组件前，需要在你的 Vue 项目中按照以下方式引入：
import FlexboxGrid from '@vivid-web/flexbox-grid-vue' import '@vivid-web/flexbox-grid-vue/dist/flexbox-grid.css' Vue.use(FlexboxGrid)
.container 容器
在使用 .container 类之后，它会包含在一个最外层容器，它主要用于包裹其他的栅格元素(Container)及其内容并使其居中对齐。
<div class="container">...</div>
.row 行
您定义在 .row 类内的所有列会占据声明 .row 的容器的 100%，它们将会被分配在相等的列宽度大小中。
<div class="row">...</div>
.col-[breakpoint]-[cols] 列
.col-[breakpoint]-[cols] 是我们给列定义大小的简写。在它的名称中，[cols]是要占据的列数，[breakpoint]是应用这种列类型的终端大小。
<div class="col-lg-4">...</div>
上述代码将会创建一个在大屏幕显示器上（宽度大于等于 1200px ）占据栅格 4 为 的列。
.offset-[breakpoint]-[cols] 偏移
使用 .offset-[breakpoint]-[cols] 可以实现行内的列偏移。在这里，[cols]是您要移动的列数并且 [breakpoint] 是应用该类的设备大小
<div class="col-md-4 offset-md-2">...</div>
上述代码将会创建一个在中等宽度屏幕上（宽度在 768px到 991px 之间）占据栅格 4 为 的列，并在行的左侧偏移2列距离 。
在所有选择器中，您还可以选择在指定的范围内加上 .first 或 .last 来定义特殊的样式：
<div class="col-md-4 offset-md-2 first">...</div>
上述代码将会创建一个包含 first 样式的列，并将其偏移至行的左侧2个表格。
响应式编写以及媒体查询
在 @vivid-web/flexbox-grid-vue 中，媒体查询和响应式设计都受到了重视。该组件包含了多个媒体查询，这意味着您可以完全对您的可扩展屏幕进行控制。同时，通过简单地应用修饰符以获取所需的响应式效果。
属性
使用以下属性可以设置栅格系统的样式。
| 属性名称 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
containerSize |
String |
否 | 100% |
.container-wrapper 的宽度 |
gutterWidth |
String |
否 | 30px |
每个 col 元素之间的外边距 |
responsive |
Boolean |
否 | true |
集成响应式栅格系统 |
breakpoints |
Object |
否 | { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 } |
展示每个 breakpoint 的最小宽度 |
containerWidths |
Object |
否 | { sm: '540', md: '720', lg: '960', xl: '1140' } |
sm、md、lg 和 xl 展示 .container 的最大宽度 |
以下示例展示如何使用上述属性之一。
<FlexboxGrid
:gutterWidth="30"
:responsive="true"
:breakpoints="{ xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }"
:containerWidths="{ sm: '540', md: '720', lg: '960', xl: '1140' }"
>
...
</FlexboxGrid>修饰符
通过给修饰符赋值来使用响应式栅格系统。
| 值 | 描述 |
|---|---|
container |
创建一个固定宽度的 container |
container-fluid |
创建一个全屏宽度的 container |
row |
父级节点的布局 |
no-gutters |
移除外侧外边距 |
col |
子级节点的布局，指定列宽 |
col-auto |
自适应大小的列 |
col-n |
快捷定义自定义宽度的列 |
offset-n |
偏移 n 个表格 |
order-n |
修改节点显示顺序 |
first |
添加上首列的样式 |
last |
添加上末列的样式 |
因为这些都是简写，这使得在模板中使用混合效果更加容易。在这里，我们可以使用 v-bind:sm="10" 将响应值的列大小设置为 10.
<div class="col"
v-bind:sm="10"
v-bind:md="6"
v-bind:lg="4"
v-bind:xl="3">
...
</div>示例代码
以下是一个基本的示例代码，定义了一行三列，并在中等宽度屏幕上应用偏移和首列样式。
-- -------------------- ---- -------
----------
-----
--------- ------------------
---- ------------
---- --------------- ----------- ------------------
---- -----------------------------
---- ----------------------------
------
-----------
------
-----------
--------
------ - -------- - ---- -----------------------------
------ ---------------------------------------------------
------ ------- -
----- ------
----------- -
--------
--
-
---------
------ ------------
----- -
-------- ------
-
---------- -
---- -
-------------- -----
----------------------- -
------------ --
-
-
-
--------结论
总的来说，@vivid-web/flexbox-grid-vue 组件包含了一些响应度很强的媒体查询，以及一些可以很好地结合使用的修饰符。它是构建 Vue 网页的非常有用和实用的组件之一。使用这篇文章作为指南，可以通过简单的几步，开始编写您需要的栅格系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f93238a385564ab7064