fitflex: CSS布局就是这么简单_fit flex软件-CSDN博客

本文链接：https://blog.csdn.net/sunq1982/article/details/105986966

Fitflex是一款能够简化CSS布局的解决方案，尤其适用于实现DOM元素的垂直居中对齐和响应式布局。只需少量JavaScript代码和配置，即可适应不同设备屏幕尺寸，包括手机、平板和台式电脑。通过配置children、location、center、adjust和gapRatio等参数，可以灵活调整元素的位置和间距。使用Fitflex，开发者可以更高效地创建UI交互和响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

您是否还在为如何实现DOM元素的垂直居中对齐而挠头呢?别担心,朋友。Fitflex为您提供了一种只需少量Javascript代码和配置就能轻松实现响应式布局的方法。还有一件事，它可以适应各种屏幕尺寸的手机、平板电脑、台式电脑……你对此感到兴奋吗?
github
npm

让我们现在就盘它吧!

UI交互的例子

大致看完文档后，你可以盘下这个例子，挺有意思的，绝对让你对CSS布局有更新的认识。

盘它吧，少年！

下载

npm install fitflex

在浏览器中使用

  <script src="fitflex.js"></script>

然后配置选项来调整元素。

<body>
    <div id='box'>
        <div class='child1'>child1</div>
        <div class='child1'>child1</div>
        <div class='child1'>child1</div>
        <div class='child2'>child2</div>
        <div class='child2'>child2</div>
        <div class='child2'>child2</div>
    </div>
    <script src="fitflex.js"></script>
    <script>
        var option = {
          location:'vertical',
          center:'cross'
        }
        fit('#box').flex(option);
    </script>
</body

检查你的浏览器。看,垂直居中!

垂直居中

容器

容器是parentNode，其中childNodes由fitflex来配置。它的用法与jquery $("p").add("div")类似。

fit(container).flex(option)

配置项

var option = {
            children: "",
            location: "",
            center: "",
            adjust: "",
            gapRatio: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                outerAll: 0,
                innerWidth: 0,
                innerHeight: 0
            },
            screenWidth: { min: 0, max: Infinity },
            flexWhenResize: true
        };

Key	Type	Value
children	String \|Array	被选中的 `childNodes`
location	String	`horizontal`, `vertical`
center	String	`forward`, `cross`, `bothway`
adjust	String	三个合并的字符串: `oneline`\|`multiline` + `outerfit`\|`innerfit` + `forward`\|`cross`\|`bothway`.
gapRatio	Object	属性: `left`, `right`, `top`, `bottom`, `outerall`, `innerWidth`, `innerHeight`
screenWidth	Object	min: `numbers`, max: `numbers`

children

参与布局的子节点。默认情况下，所有的子节点都将被涉及。
该值可以是elementID或className，例如.child、#child或数组["child1"., ".child2", ".child3"]。
如果您想指定childNodes的宽度和高度，那么[{d:.child1, w:0.1, h: 0.2}, {d:".child2", w:0.2, height: 0.1}]。
您甚至可以使用二维数组，这样您就可以将childnode分组到不同的行中，例如[[{d:".child1," w:0.1, h: 0.2}], [{d:".child2", w:0.2, h: 0.1}]]。
请注意，w和h的值不是px，而是childnode的宽高和parentNode宽高之比。

location

horizontal(default) and vertical.

center

forward:以x轴为中心的子节点;
cross:以y轴为中心;
bothway: 以X轴和Y轴为中心.

adjust

此选项用于调整childNodes 边界和parentNodes 边界的关系，以便可以使childNodes和parentNodes宽高自动相互匹配。
设置基于3个字符串组合，如:onelineOuterfitForward或multilineInnerfitCross，大小写不敏感。
oneline:将选择的子节点强制放到一行中。
multiline: childNodes的放置是基于以前的选项设置。
outerfit: 调整parentNodes内边界，使之和childNodes外边界重合
innerfit:调整childNodes 的外边界，使之和parentNodes的内边界重合。
forward: 在X-Axis居中.
cross: 围绕Y-Axis居中
bothway：围绕both X 和 Y Axis居中

gapRatio

childNodes和parentNodes之间(left, right，top，bottom，outerall)或childNodes之间(innerwidth，innerheight)的间隔距离。请注意，值不是px，它是childNodes宽高与parentNode宽高之比。您也可以设置一个或两个如下：

innerWidth: 'fit', innerHeight:`fit`

然后，childNode之间的间隙距离最大，使得最外面的childNodes边界与ParentNodes内边界重合。
您还可以通过设置数组值来进一步调整子节点之间的行间距或列间距，达到精细的控制。

innerWidth: [0.05, 0.03,...], innerHeight:[0.01, 0.02,...]

请注意，数组单元格值是childNode宽高与parentNode宽高之比。

screenWidth

用于响应式布局，设置屏幕宽度

flexWhenResize

调整屏幕宽度时调整布局。

响应式布局

通过使用option array 而不是一个option，您可以使不同的布局适应于不同的屏幕宽度。

<script>
        var opt1 = {
            location:'vertical',
            center:'cross',
            screenWidth: { min: 501, max: Infinity }
        }; 

        var opt2 = {
            location:'horizontal',
            center:'forward',
            screenWidth: { min: 0 , max: 500}
        };

        var optArray = [opt1, opt2]
        fit('#box').flex(optArray);
    </script>