flex gap polyfill

Polifill Celah Fleksibel

Ini adalah polyfill CSS murni menggunakan PostCSS untuk meniru celah fleksibel menggunakan margin.

Keterbatasan yang diketahui

• Harus menggunakan div pembungkus saat menggunakan margin: auto atau background .
• Kesenjangan persentase tidak dapat diandalkan jika lebar penampung tidak memenuhi lebar penampung induk
• Lebar item fleksibel dengan persentase sedikit berbeda dari spesifikasi karena margin negatif pada wadah.

Lihat halaman demo untuk berbagai kasus uji aksi polyfill.

Contoh

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

Menjadi:

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

Polyfill mengemulasi celah fleksibel dengan menambahkan margin ke setiap elemen turunan dan menerapkan margin negatif ke wadah.

• BARU Sekarang berfungsi terlepas dari apakah display: flex dan gap digunakan dalam aturan yang sama (lihat Opsi untuk cara mengoptimalkan)
• Bekerja dengan elemen bersarang tanpa batas dengan kombinasi unit apa pun, px > px, px > %, % > %, dll.
• Tidak diperlukan nama kelas atau div tambahan (kecuali saat menggunakan margin: auto atau background )
• Berfungsi bahkan ketika margin sudah ada pada elemen (gaya sebaris tidak didukung)
• Margin gaya, batas, dan bantalan seperti biasa
• Mendukung gap , row-gap , dan column-gap

Dukungan peramban

Mendukung semua browser modern saat ini, Edge, Firefox, Chrome, Safari, Opera (browser apa pun yang mendukung calc() dan var() ).

Penggunaan

Tambahkan Flex Gap Polyfill ke proyek Anda:

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

Gunakan Flex Gap Polyfill untuk memproses CSS Anda:

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

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

Atau gunakan sebagai plugin PostCSS:

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

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

Pilihan

• only

  Tipe : Array Default : tidak terdefinisi

  Ketika polyfill true hanya akan berlaku ketika display: flex | inline-flex dan gap digunakan dalam aturan yang sama. Sediakan serangkaian penyeleksi untuk mencocokkan aturan tambahan. Bisa berupa strings atau regexes . Sertakan /* apply fgp */ dalam aturan untuk menerapkan polyfill secara manual.

• flexGapNotSupported

  Jenis : String Default : salah

  Tentukan pemilih secara manual untuk digunakan ketika celah fleksibel tidak didukung oleh deteksi melalui JavaScript, misalnya flexGapNotSupported: '.flex-gap-not-supported' .

• webComponents

  Tipe : Boolean Default : salah

  Ketika polyfill true juga akan menargetkan elemen yang ditempatkan