flex gap polyfill

Polirelleno de espacio flexible

Este es un polyfill CSS puro que usa PostCSS para emular un espacio flexible usando márgenes.

Limitaciones conocidas

• Debe usar un div contenedor cuando se usa margin: auto o background .
• Los espacios porcentuales no son confiables si el contenedor no tiene el ancho completo del contenedor principal
• El ancho de los elementos flexibles con porcentajes varía ligeramente de las especificaciones debido al margen negativo en el contenedor.

Vea la página de demostración para ver varios casos de prueba del polyfill en acción.

Ejemplo

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

Se convierte en:

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

El polyfill emula el espacio flexible agregando márgenes a cada elemento secundario y aplicando un margen negativo al contenedor.

• NUEVO Ahora funciona independientemente de si display: flex y gap se usan en la misma regla (consulte Opciones para conocer formas de optimizar)
• Funciona con elementos anidados ilimitados con cualquier combinación de unidades, px > px, px > %, % > %, etc.
• No se necesitan nombres de clases ni divs adicionales (excepto cuando se usa margin: auto o background )
• Funciona incluso cuando ya existe un margen en el elemento (no se admiten estilos en línea)
• Aplicar estilo al margen, los bordes y el relleno como de costumbre
• Admite gap , row-gap y column-gap

Soporte del navegador

Admite todos los navegadores modernos actuales, Edge, Firefox, Chrome, Safari, Opera (cualquier navegador que admita calc() y var() ).

Uso

Agregue Flex Gap Polyfill a su proyecto:

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

Utilice Flex Gap Polyfill para procesar su CSS:

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

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

O utilícelo como complemento PostCSS:

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

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

Opciones

• only

  Tipo : Matriz Predeterminado : indefinido

  Cuando true polyfill solo se aplicará cuando display: flex | inline-flex y gap se utilizan en la misma regla. Proporcione una variedad de selectores para que coincidan con reglas adicionales. Pueden ser strings o regexes . Incluya /* apply fgp */ dentro de una regla para aplicar manualmente el polyfill.

• flexGapNotSupported

  Tipo : Cadena Predeterminado : falso

  Especifique manualmente un selector para usar cuando la detección mediante JavaScript no admite la separación flexible, por ejemplo, flexGapNotSupported: '.flex-gap-not-supported' .

• webComponents

  Tipo : Booleano Predeterminado : falso

  Cuando true polyfill también apuntará a elementos ranurados