flex gap polyfill

Flex Gap Polyfill

Este é um polyfill CSS puro usando PostCSS para emular flex gap usando margens.

Limitações conhecidas

• Deve usar um wrapper div ao usar margin: auto ou background .
• As lacunas percentuais não são confiáveis ​​se o contêiner não tiver largura total do contêiner pai
• A largura dos itens flexíveis com porcentagens varia ligeiramente em relação às especificações devido à margem negativa no contêiner.

Veja a página de demonstração para vários casos de teste do polyfill em ação.

Exemplo

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

Torna-se:

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

O polyfill emula o flex gap adicionando margens a cada elemento filho e aplicando uma margem negativa ao contêiner.

• NOVO Agora funciona independentemente de display: flex e gap serem usados ​​na mesma regra (veja Opções para formas de otimizar)
• Funciona com elementos aninhados ilimitados com qualquer combinação de unidades, px > px, px > %, % > %, etc.
• Não são necessários nomes de classes ou divs adicionais (exceto ao usar margin: auto ou background )
• Funciona mesmo quando já existe margem no elemento (estilos embutidos não suportados)
• Estilize margem, bordas e preenchimento normalmente
• Suporta gap , row-gap e column-gap

Suporte ao navegador

Suporta todos os navegadores modernos atuais, Edge, Firefox, Chrome, Safari, Opera (qualquer navegador que suporte calc() e var() ).

Uso

Adicione Flex Gap Polyfill ao seu projeto:

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

Use Flex Gap Polyfill para processar seu CSS:

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

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

Ou use-o como um plugin PostCSS:

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

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

Opções

• only

  Tipo : Matriz Padrão : indefinido

  Quando true o polyfill só será aplicado quando display: flex | inline-flex e gap são usados ​​na mesma regra. Forneça uma série de seletores para corresponder a regras adicionais. Podem ser strings ou regexes . Inlcude /* apply fgp */ dentro de uma regra para aplicar manualmente o polyfill.

• flexGapNotSupported

  Tipo : String Padrão : falso

  Especifique manualmente um seletor para usar quando o flex gap não for suportado pela detecção via JavaScript, por exemplo, flexGapNotSupported: '.flex-gap-not-supported' .

• webComponents

  Tipo : Booleano Padrão : falso

  Quando true polyfill também terá como alvo elementos com fenda