flex gap polyfill

Polyremplissage Flex Gap

Il s'agit d'un pur polyfill CSS utilisant PostCSS pour émuler l'espace flexible à l'aide des marges.

Limites connues

• Doit utiliser un div wrapper lors de l’utilisation margin: auto ou background .
• Les écarts en pourcentage ne sont pas fiables si le conteneur n'a pas toute la largeur du conteneur parent.
• La largeur des éléments flexibles avec des pourcentages varie légèrement par rapport aux spécifications en raison de la marge négative sur le conteneur.

Consultez la page de démonstration pour différents cas de test du polyfill en action.

Exemple

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

Devient :

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

Le polyfill émule l'espace flexible en ajoutant des marges à chaque élément enfant et en appliquant une marge négative au conteneur.

• NOUVEAU Fonctionne désormais indépendamment du fait que display: flex et gap sont utilisés dans la même règle (voir Options pour les moyens d'optimiser)
• Fonctionne avec un nombre illimité d'éléments imbriqués avec n'importe quelle combinaison d'unités, px > px, px > %, % > %, etc.
• Aucun nom de classe ou div supplémentaire n'est nécessaire (sauf lors de l'utilisation margin: auto ou background )
• Fonctionne même lorsqu'une marge existe déjà sur l'élément (styles en ligne non pris en charge)
• Styler la marge, les bordures et le remplissage comme d'habitude
• Prend en charge gap , row-gap et column-gap

Prise en charge du navigateur

Prend en charge tous les navigateurs modernes actuels, Edge, Firefox, Chrome, Safari, Opera (tout navigateur prenant en charge calc() et var() ).

Usage

Ajoutez Flex Gap Polyfill à votre projet :

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

Utilisez Flex Gap Polyfill pour traiter votre CSS :

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

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

Ou utilisez-le comme plugin PostCSS :

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

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

Possibilités

• only

  Type : Tableau Par défaut : non défini

  Lorsque true polyfill ne s'appliquera que lors display: flex | inline-flex et gap sont utilisés dans la même règle. Fournissez un tableau de sélecteurs pour faire correspondre des règles supplémentaires. Il peut s'agir strings ou regexes . Incluez /* apply fgp */ dans une règle pour appliquer manuellement le polyfill.

• flexGapNotSupported

  Type : Chaîne Par défaut : faux

  Spécifiez manuellement un sélecteur à utiliser lorsque flex gap n'est pas pris en charge par la détection via JavaScript, par exemple flexGapNotSupported: '.flex-gap-not-supported' .

• webComponents

  Type : Booléen Par défaut : faux

  Quand true polyfill ciblera également les éléments à fentes