什么是 tachyons-widths？
tachyons-widths 是一个 npm 包，它包括了一系列快速布局的 CSS 类，可以帮助你快速实现常见的布局，节省你编写 CSS 样式表的时间和精力。
如何使用 tachyons-widths？
首先，你需要在项目中安装 tachyons-widths。在命令行中输入以下命令：
npm install --save tachyons-widths
接着，在你的 HTML 文件中引入 tachyons-widths：
<link rel="stylesheet" href="node_modules/tachyons-widths/css/tachyons-widths.css">
然后，你可以在你的 HTML 中使用 tachyons-widths 提供的 CSS 类实现快速布局。例如：
<div class="flex">
<div class="w-third">
<img src="https://placehold.it/350x150">
</div>
<div class="w-two-thirds pl3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada tincidunt mauris in viverra. Praesent a congue eros. Sed aliquam ipsum vel dolor vestibulum, non convallis enim varius. Pellentesque in ornare diam. Vestibulum ut consectetur odio. Sed vitae velit tortor.</p>
</div>
</div>以上代码实现了两列布局，左侧是一张图片，宽度占据整个容器的三分之一；右侧是一段文字，宽度占据整个容器的三分之二，并且与左侧有 1em 的间距。
tachyons-widths 提供了哪些 CSS 类？
tachyons-widths 提供了以下 CSS 类：
.w-25、.w-50、.w-75、.w-100：设置元素的宽度为 25%、50%、75%、100%.w-auto：自适应宽度.w-third、.w-two-thirds、.w-one-quarter、.w-one-third、.w-half、.w-two-fifths、.w-three-fifths、.w-four-fifths、.w-90：设置元素的宽度为对应比例或像素值.mw-100、.mw-none：设置元素的最大宽度为 100% 或“无限制”.flex、.inline-flex：设置元素为 flexbox 布局或 inline-flexbox 布局.items-center、.items-start、.items-end：设置 flexbox 布局的主轴对齐方式.justify-center、.justify-end、.justify-between、.justify-around：设置 flexbox 布局的交叉轴对齐方式
以上 CSS 类只是 tachyons-widths 提供的部分样式，更多样式请参考 tachyons-widths 的官方文档。
示例代码
以下是一个通过 tachyons-widths 快速实现的响应式网站布局：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ----------
----- ---------------- ------------------------------------------------------------
-------
-- ----- --
---- -
------------ -----------
------- --
-
------- -
----------------- -----
------ ------
------- -----
-------- -----
------------ -------
---------------- --------------
-------- - ----
-
---- -
-------- -----
---------------- -------
------------ -------
------- -----
----------------- --------
-
-------- -
-------- ----
-
----- -
------- --- ----- -----
-------------- ----
-------- ----
-
----------- -
------------ -----
-------------- -----
-
---------- -
------- --
-
------- -
------ --------- - ---
-
------- ------ --- ----------- ----- -
-- ------- ---- ------------ --
------- -
------ -----
-
-
--------
-------
------
---- ---------------
------------------- -------
------ ----------- -----------------
------
---- ------------
-- ---------------
-- ---------------
-- ---------------
-- ---------------
------
---- ----------------
---- ----------- -----------
---- ------------- ---------
---- -------------
--- -----------------------------
-- ----------------------------------------------------------------------
------
------
---- ------------- ---------
---- -------------
--- -----------------------------
-- ----------------------------------------------------------------------
------
------
---- ------------- ---------
---- -------------
--- -----------------------------
-- ----------------------------------------------------------------------
------
------
---- ------------- --------------
---- -------------
--- ----------------------------
-- ------------------------------------------------------------------
------
------
---- ------------- -------------
---- -------------
--- ----------------------------
-- ------------------------------------------------------------
------
------
------
------
-------
-------以上代码实现了一个响应式网站布局，页面头部包括一个标题和一个搜索框，导航栏包括几个链接，内容区域包括若干个文章卡片和一些其他卡片。在屏幕宽度小于 40em 时，网站布局将改为单列式。
总结
tachyons-widths 是一个非常实用的前端工具包，它帮助我们快速实现常见的布局，使我们能够更好地关注页面的交互和功能实现。使用 tachyons-widths，你可以轻松实现响应式网站布局，通过自定义样式，让网站更符合你的要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69122