简介
tachyons-flex-grid 是一个基于 Tachyons 框架的用于创建响应式网格化布局的 npm 包。 它提供了一种更加简洁和易于使用的方法来创建灵活的响应式布局，同时保留了 Tachyons 框架的快速开发和可扩展性。
安装
首先，在项目目录下，使用 npm 安装 tachyons-flex-grid：
npm install tachyons-flex-grid --save
安装完成后，你需要在 HTML 文档的头部引入 CSS 文件：
<link rel="stylesheet" href="node_modules/tachyons-flex-grid/css/tachyons-flex-grid.css">
使用
1. 创建容器
首先，我们需要添加一个容器来包含我们的栅格系统。用以下 HTML 代码：
<div class="flex flex-wrap"> ... </div>
其中，.flex 和 .flex-wrap 类是 Tachyons 的类，用于创建一个 flex 容器，并使其在容器宽度不足时自动换行。 .flex-wrap 类也提供了一个方便的方式来处理容器的内部元素，将其自动排列为响应式的网格布局。
2. 创建栅格
在我们的容器中添加子元素，并为其添加 .flex-*-* 类。其中第一个星号代表了我们想要元素在屏幕上所占用的列数，第二个星号表示了我们想要元素在被设置为父元素的宽度时所占用的列数。
比如，我们想要一个占用一半宽度的元素，可以这样写：
<div class="flex flex-wrap">
<div class="flex-1-2">
...
</div>
</div>类名 .flex-1-2 中，1 表示首先元素要占据一列，2 表示该元素在父元素宽度为 2 时占据一列。
同理，如果我们想要一个占用 1/3 宽度的元素，可以这样写：
<div class="flex flex-wrap">
<div class="flex-1-3">
...
</div>
</div>3. 创建间隔
默认情况下，栅格元素之间是没有间隔的。我们可以通过添加 .pa-* 类来为每个栅格元素添加 padding，实现元素之间的间隔。
比如，我们想要一个带有 1 个 padding 单位的元素间隔，可以这样写：
<div class="flex flex-wrap">
<div class="flex-1-2 pa1">
...
</div>
<div class="flex-1-2 pa1">
...
</div>
</div>4. 设置偏移量
如果我们需要将元素偏移一定的单元格，我们可以添加 .ml-* 或 .mr-* 类。比如，我们想要将一个元素偏移 3 个单元格，可以这样写：
<div class="flex flex-wrap">
<div class="flex-1-2 ml3">
...
</div>
<div class="flex-1-2">
...
</div>
</div>5. 创建响应式布局
tachyons-flex-grid 还提供了一组用于创建响应式布局的类，以便在不同的屏幕大小下使用不同的栅格布局。需要注意的是，我们需要将需要设置栅格的元素放在一个 <div class="flex"> 容器内，并添加一个 .flex-column 类，将容器内元素垂直排列。
以下我们将介绍一些常用的响应式类：
.flex-ns-*-*：在大于等于屏幕尺寸ns时，元素占据的列数。.dn-ns：在大于等于屏幕尺寸ns时，元素不可见。.ml-ns-*和.mr-ns-*：在大于等于屏幕尺寸ns时，元素偏移的单元数。
以下代码展示了如何创建一个在大屏幕下为 3 列，在小屏幕下为 1 列的布局：
-- -------------------- ---- -------
---- ----------- --------- ----------- -------------
---- --------------- ------------------ --- --------
---
------
---- --------------- ------------------ -----
---
------
---- --------------- ------------------ --- --------
---
------
------在这个例子中，.flex-ns-row 类用于指定屏幕尺寸 ns 时，容器内元素需要水平排列。
示例代码
以下是一个使用 tachyons-flex-grid 布局的实际例子：
-- -------------------- ---- -------
---- ----------- --------- ----------- -------------
---- --------------- ------------------ --- --------
---- -------------- -------
--- ---------- ----------- ------
-- ----------------- ----- ----- --- ----- ----------- ---------- ---------
------
---- --------------- ------------------ -----
---- -------------- -------
--- ---------- ----------- ------
-- ----------------- ----- ----- --- ----- ----------- ---------- ---------
------
---- --------------- ------------------ --- --------
---- -------------- -------
--- ---------- ----------- ------
-- ----------------- ----- ----- --- ----- ----------- ---------- ---------
------
---- --------------- ------------------ --- --------
---- -------------- -------
--- ---------- ----------- ------
-- ----------------- ----- ----- --- ----- ----------- ---------- ---------
------
---- --------------- ------------------ -----
---- -------------- -------
--- ---------- ----------- ------
-- ----------------- ----- ----- --- ----- ----------- ---------- ---------
------
------总结
tachyons-flex-grid 是一个非常方便的 npm 包，可以轻松地创建响应式网格化布局，并且非常容易上手。如果你想要在前端开发中快速创建网格化布局，tachyons-flex-grid 是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595181e8991b448d6b73