flex gap polyfill Download – flex gap polyfill Quellcode herunterladen

flex gap polyfill

Anderer Quellcode

v5.0.0

Herunterladen

Flex Gap Polyfill

Dies ist eine reine CSS-Polyfüllung, die PostCSS verwendet, um Flex-Gap mithilfe von Rändern zu emulieren.

Bekannte Einschränkungen

Bei Verwendung margin: auto oder background muss ein Wrapper-Div verwendet werden.
Prozentuale Lücken sind nicht zuverlässig, wenn der Container nicht die volle Breite des übergeordneten Containers hat
Die Breite von Flex-Artikeln mit Prozentangaben weicht aufgrund des negativen Rands am Container geringfügig von der Spezifikation ab.

Sehen Sie sich die Demoseite für verschiedene Testfälle des Polyfills in Aktion an.

Beispiel

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

Wird:

 /* 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 ));
}

Die Polyfüllung emuliert Flex Gap, indem sie jedem untergeordneten Element Ränder hinzufügt und einen negativen Rand auf den Container anwendet.

NEU Funktioniert jetzt unabhängig davon, ob display: flex und gap in derselben Regel verwendet werden (siehe Optionen für Möglichkeiten zur Optimierung).
Funktioniert mit unbegrenzt verschachtelten Elementen mit jeder Kombination von Einheiten, px > px, px > %, % > %, usw
Keine zusätzlichen Klassennamen oder Divs erforderlich (außer bei Verwendung von margin: auto oder background )
Funktioniert auch, wenn am Element bereits ein Rand vorhanden ist (Inline-Stile werden nicht unterstützt)
Gestalten Sie Ränder, Ränder und Polsterung wie gewohnt
Unterstützt gap , row-gap und column-gap

Browserunterstützung

Unterstützt alle aktuellen modernen Browser, Edge, Firefox, Chrome, Safari, Opera (jeder Browser, der calc() und var() unterstützt).

Verwendung

Fügen Sie Flex Gap Polyfill zu Ihrem Projekt hinzu:

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

Verwenden Sie Flex Gap Polyfill, um Ihr CSS zu verarbeiten:

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

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

Oder verwenden Sie es als PostCSS-Plugin:

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

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

Optionen

only
Typ : Array Standard : undefiniert
Wenn true Polyfüllung nur angewendet wird, wenn display: flex | inline-flex und gap werden in derselben Regel verwendet. Stellen Sie ein Array von Selektoren bereit, um zusätzliche Regeln abzugleichen. Dies können strings oder regexes sein. Fügen Sie /* apply fgp */ in eine Regel ein, um die Polyfüllung manuell anzuwenden.
flexGapNotSupported
Typ : String Standard : false
Geben Sie manuell einen Selektor an, der verwendet werden soll, wenn Flex Gap von der Erkennung über JavaScript nicht unterstützt wird, z. B. flexGapNotSupported: '.flex-gap-not-supported' .