简介
superfly-css-utilities-layout 是一个方便实用的 CSS 布局工具箱，可快速创建样式组合来满足不同的布局需求。使用该工具箱可以轻松实现响应性和可定制的布局——不需要编写额外的 CSS。
安装
安装的方式非常简单，只需在终端中键入以下命令即可：
npm install superfly-css-utilities-layout
安装成功后，便可以在项目中使用该工具箱。
布局类
以下是该工具箱中可用的布局类及其描述：
sf-u-flex-row
该类可以使元素容器变为一个横向的 flex 容器，子元素会自动排列。如果宽度不够，子元素会自动折行。
<div class="sf-u-flex-row"> <div>这是第一个子元素</div> <div>这是第二个子元素</div> <div>这是第三个子元素</div> </div>
sf-u-flex-col
该类将元素容器变成了一个垂直的 flex 容器，子元素会自动排列。如果高度不够，子元素会自动折行。
<div class="sf-u-flex-col"> <div>这是第一个子元素</div> <div>这是第二个子元素</div> <div>这是第三个子元素</div> </div>
sf-u-1/2 ~ sf-u-1/6
这些类可以将元素宽度分为相等的几份。例如，sf-u-1/2 表示元素宽度为父元素宽度的 50%。类名中的数字可以修改，例如 sf-u-1/3 表示元素宽度为父元素宽度的 33.3%。
<div class="sf-u-flex-row"> <div class="sf-u-1/2">宽度为一半</div> <div class="sf-u-1/2">宽度为一半</div> </div>
sf-u-gap-1 ~ sf-u-gap-4
这些类可以为元素容器添加上下左右的间隔。
<div class="sf-u-gap-2"> <div>这是一个有 2 个间隔的容器</div> </div>
sf-u-float-left
该类将元素向左浮动，使其处于容器的左边。
<div class="sf-u-flex-row"> <div class="sf-u-float-left">这是左浮动的元素</div> <div>这是非浮动的元素</div> </div>
sf-u-float-right
该类将元素向右浮动，使其处于容器的右边。
<div class="sf-u-flex-row"> <div>这是非浮动的元素</div> <div class="sf-u-float-right">这是右浮动的元素</div> </div>
sf-u-text-center
该类可以将块元素水平居中。
<div class="sf-u-text-center">这个块元素已经居中了！</div>
总结
superfly-css-utilities-layout 是一个非常有用的工具箱，它提供了许多很好的布局类，可以节省开发人员的时间。此外，它还具有完善的响应性和可定制性，可以满足不同的布局需求。当您需要实现布局时，请尝试使用该工具箱，它值得您的尝试。
示例代码
-- -------------------- ---- -------
------
----- ---------------- ---------------------------------------------------------------------------------------------
-------
------
---- -------------------- ------------
---- ---------------------------
---- ---------------------------
------
---- ----------------------
---- -----------------------------------
---- ------------------------------------
------
---- -------------------- ------------
----------------
----------------
----------------
------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576081e8991b448d45aa