flex gap polyfill下载 - flex gap polyfill源代码下载

flex gap polyfill

其他源码

v5.0.0

下载

Flex Gap 聚合物填充材料

这是一个纯 CSS 填充，使用 PostCSS 来模拟使用边距的弹性间隙。

已知的限制

使用margin: auto或background时必须使用包装 div。
如果容器不是父容器的全宽，则百分比间隙不可靠
由于容器上的负边距，带有百分比的弹性项目的宽度与规格略有不同。

查看演示页面，了解运行中的 polyfill 的各种测试用例。

例子

. container {
    display : flex;
    gap : 40 px ;
}

变成：

 /* Output simplified for purpose of example */

. container > * {
    --fgp-parent-gap-row : 40 px ;
    --fgp-parent-gap-column : 40 px ;
    --fgp-margin-top : calc ( var ( --fgp-gap-row ) + var ( --orig-margin-top , 0 px ));
    --fgp-margin-left : calc (
        var ( --fgp-gap-column ) + var ( --orig-margin-left , 0 px )
    );
    margin-top : var ( --fgp-margin-top );
    margin-left : var ( --fgp-margin-left );
}

. container {
    --fgp-gap : var ( --has-fgp , 40 px );
    --fgp-gap-row : 40 px ;
    --fgp-gap-column : 40 px ;
    --fgp-margin-top : calc (
        var ( --fgp-parent-gap-row , 0 px ) - var ( --fgp-gap-row ) + var ( --orig-margin-top , 0 px )
    );
    --fgp-margin-left : calc (
        var ( --fgp-parent-gap-column , 0 px ) - var ( --fgp-gap-column ) + var ( --orig-margin-left , 0 px )
    );
    display : flex;
    gap : var ( --fgp-gap , 0 px );
    margin-top : var ( --fgp-margin-top , var ( --orig-margin-top ));
    margin-left : var ( --fgp-margin-left , var ( --orig-margin-left ));
}

Polyfill 通过向每个子元素添加边距并向容器应用负边距来模拟 Flex Gap。

新的现在，无论是否在同一规则中使用display: flex和gap都可以工作（请参阅选项以了解优化方法）
适用于具有任意单位组合的无限嵌套元素，px > px、px > %、% > % 等
不需要额外的类名或 div（使用margin: auto或background时除外）
即使元素上已经存在边距也可以工作（不支持内联样式）
正常设置边距、边框和填充的样式
支持gap 、 row-gap和column-gap

浏览器支持

支持当前所有现代浏览器，Edge、Firefox、Chrome、Safari、Opera（任何支持calc()和var()浏览器）。

用法

将 Flex Gap Polyfill 添加到您的项目中：

npm install flex-gap-polyfill postcss --save-dev

使用Flex Gap Polyfill处理您的 CSS：

 const flexGapPolyfill = require ( "flex-gap-polyfill" ) ;

flexGapPolyfill . process ( YOUR_CSS /*, processOptions, pluginOptions */ ) ;

或者将其用作 PostCSS 插件：

 const postcss = require ( "postcss" ) ;
const flexGapPolyfill = require ( "flex-gap-polyfill" ) ;

postcss ( [ flexGapPolyfill ( /* pluginOptions */ ) ] ) . process (
    YOUR_CSS /*, processOptions */
) ;

选项

only
类型：数组默认值：未定义
true polyfill 仅在display: flex | inline-flex和gap在同一规则中使用。提供一系列选择器来匹配其他规则。可以是strings或regexes 。在规则中包含/* apply fgp */以手动应用填充。
flexGapNotSupported
类型：字符串默认值：false
当 JavaScript 检测不支持 Flex Gap 时，手动指定要使用的选择器，例如flexGapNotSupported: '.flex-gap-not-supported' 。