flex gap polyfill 다운로드 - flex gap polyfill 소스 코드 다운로드

flex gap polyfill

기타 소스코드

v5.0.0

다운로드

플렉스 갭 폴리필

이것은 여백을 사용하여 플렉스 갭을 에뮬레이트하기 위해 PostCSS를 사용하는 순수 CSS 폴리필입니다.

알려진 제한사항

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' .