flex gap polyfill

Flex Gap Полифилл

Это полифил на чистом CSS, использующий PostCSS для эмуляции гибкого разрыва с помощью полей.

Известные ограничения

• При использовании 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' .

• webComponents

  Тип : логический. Значение по умолчанию : false.

  Когда true полифил также будет нацелен на элементы с прорезями