ดาวน์โหลด flex gap polyfill - ดาวน์โหลด flex gap polyfill ซอร์สโค้ด

flex gap polyfill

ซอร์สโค้ดอื่น ๆ

v5.0.0

ดาวน์โหลด

เฟล็กซ์ แกป โพลีฟิลล์

นี่คือ CSS polyfill ล้วนๆ โดยใช้ PostCSS เพื่อจำลองช่องว่างแบบยืดหยุ่นโดยใช้ระยะขอบ

ข้อจำกัดที่ทราบ

ต้องใช้ div wrapper เมื่อใช้ margin: auto หรือ background
ช่องว่างเปอร์เซ็นต์ไม่น่าเชื่อถือถ้าคอนเทนเนอร์ไม่เต็มความกว้างของคอนเทนเนอร์หลัก
ความกว้างของรายการดิ้นที่มีเปอร์เซ็นต์แตกต่างจากข้อมูลจำเพาะเล็กน้อย เนื่องจากระยะขอบติดลบบนคอนเทนเนอร์

ดูหน้าสาธิตสำหรับกรณีทดสอบต่างๆ ของโพลีฟิลที่ใช้งานจริง

ตัวอย่าง

. 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 Polyfill จะใช้เฉพาะเมื่อ display: flex | inline-flex และ gap ถูกใช้ในกฎเดียวกัน ระบุอาร์เรย์ของตัวเลือกเพื่อให้ตรงกับกฎเพิ่มเติม อาจเป็น strings หรือ regexes รวม /* apply fgp */ ภายในกฎเพื่อใช้ Polyfill ด้วยตนเอง
flexGapNotSupported
ประเภท : สตริง ค่า เริ่มต้น : เท็จ
ระบุตัวเลือกด้วยตนเองเพื่อใช้เมื่อการตรวจจับผ่าน JavaScript ไม่รองรับ Flex Gap เช่น flexGapNotSupported: '.flex-gap-not-supported'