flex gap polyfillダウンロード - flex gap polyfillソースコードのダウンロード

flex gap polyfill

その他のソースコード

v5.0.0

ダウンロード

フレックスギャップポリフィル

これは、PostCSS を使用してマージンを使用してフレックスギャップをエミュレートする純粋な CSS ポリフィルです。

既知の制限事項

margin: autoまたはbackground使用する場合は、ラッパー div を使用する必要があります。
コンテナが親コンテナの全幅でない場合、パーセンテージギャップは信頼できません。
コンテナーにマイナスのマージンがあるため、パーセントを含むフレックス項目の幅は仕様とわずかに異なります。

実際のポリフィルのさまざまなテストケースについては、デモページをご覧ください。

例

. 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 ));
}

ポリフィルは、各子要素にマージンを追加し、コンテナに負のマージンを適用することで、フレックスギャップをエミュレートします。

新しい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の場合、ポリフィルはdisplay: flex | inline-flexとgap同じルールで使用されます。追加のルールに一致するセレクターの配列を提供します。 stringsまたはregexesを使用できます。ポリフィルを手動で適用するには、ルール内に/* apply fgp */含めます。
flexGapNotSupported
タイプ: 文字列デフォルト: false
JavaScript による検出でフレックスギャップがサポートされていない場合に使用するセレクターを手動で指定します (例: flexGapNotSupported: '.flex-gap-not-supported' 。