flex gap polyfill

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' 。

• webComponents

  類型：布林值預設值：false

  當true polyfill也將定位開槽元素時