Memikirkan 'jurang'

Atribut CSS gap bukanlah sesuatu yang baru, tetapi tahun lepas ia mendapat ciri baru yang besar: kini ia berfungsi bukan sahaja untuk grid CSS, tetapi juga untuk Flexbox. Memandangkan itu, dan saya fikir harta itu lebih kompleks daripada yang kelihatan, saya ingin mengkaji semula dan menerangkan dengan tepat bagaimana ia berfungsi.

Mari kita lihat dengan lebih dekat dengan gap dan sifat berkaitan mereka dan memahami bagaimana dan di mana mereka bekerja.

Semua sifat jurang

Pertama, mari kita semak semua sifat CSS yang berkaitan dengan gap . Terdapat enam jumlah keseluruhan:

• grid-row-gap
• grid-column-gap
• grid-gap
• row-gap
• column-gap
• gap

Dari senarai ini, kita boleh mengabaikan tiga sifat pertama. Atribut grid-* telah ditambah awal dalam merangka spesifikasi grid CSS dan kemudiannya ditutup apabila gap menjadi lebih umum. Penyemak imbas masih menyokong sifat-sifat grid-* yang tidak disengajakan (seperti penulisan ini) dan hanya merawatnya sebagai awalan bukan grid- . Oleh itu, grid-gap adalah sama dengan gap , grid-column-gap adalah sama dengan column-gap , grid-row-gap adalah sama dengan row-gap .

Bagi tiga sifat yang lain, memandangkan gap adalah singkatan yang membolehkan anda menentukan dua sifat lain, kita hanya perlu tahu apa row-gap dan column-gap .

Pemahaman kami tentang sifat -sifat ini bergantung kepada jenis susun atur CSS yang kami gunakan. Mari kita lihat terlebih dahulu pilihan ini.

Di mana Gap boleh digunakan?

Jika anda seperti saya, anda telah menggunakan gap dalam susun atur grid, tetapi sekarang ia juga boleh digunakan dalam Flexbox serta susun atur pelbagai lajur. Mari kita semak setiap situasi.

Jurang grid

Semua pelayar menyokong gap dalam susun atur grid, dan mereka sangat mudah difahami dalam konteks ini.

• row-gap memperkenalkan ruang antara trek baris
• column-gap memperkenalkan ruang antara orbit lajur

Mari buat grid dengan tiga lajur dan dua baris:

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; }</code>

Ini akan memberi kita grid berikut:

Garis dalam angka di atas dipanggil garis grid , yang memisahkan trek (baris dan lajur) grid. Garis -garis ini tidak semestinya wujud di dalam grid - mereka tidak kelihatan, tidak mempunyai ketebalan, dan biasanya apa yang dipamerkan oleh DevTools apabila kami membolehkan pemeriksa grid (di safari, firefox, tepi, atau krom).

Walau bagaimanapun, jika kita mula menambah jurang ke grid, ia akan berfungsi seperti garis -garis ini mula mendapat ketebalan.

Mari tambahkan jurang 20px:

 <code>.container { display: grid; grid-template-columns: 200px 100px 300px; grid-template-rows: 100px 100px; gap: 20px; }</code>

Sekarang garis di antara trek kami adalah tebal 20px, jadi menolak projek grid lagi.

Perlu diingat bahawa trek masih mempunyai saiz yang sama (ditakrifkan oleh grid-template-* harta); oleh itu, grid lebih luas dan lebih besar daripada tanpa jurang.

Dalam grid, row-gap sentiasa digunakan di antara trek baris. Oleh itu, jika kita menggantikan gap dengan row-gap dalam contoh di atas, kita akan mendapat:

Dan column-gap sentiasa digunakan di antara trek lajur, jadi menggantikan gap dengan column-gap akan menghasilkan hasil berikut:

Grid adalah mudah kerana secara lalai, lajur adalah menegak dan baris adalah mendatar, sama seperti dalam jadual. Oleh itu, mudah untuk diingat di mana aplikasi column-gap dan row-gap .

Sekarang perkara menjadi lebih rumit apabila menggunakan writing-mode . Mod penulisan lalai pada rangkaian adalah mod mendatar dari kiri ke kanan, tetapi terdapat juga mod penulisan menegak, apabila ini berlaku, lajur menjadi mendatar dan baris menjadi menegak. Sentiasa perhatikan writing-mode kerana ia boleh menjadikannya kurang intuitif kerana biasanya.

Ini adalah peralihan yang baik ke bahagian seterusnya, kerana lajur dan baris mendapatkan makna baru dalam Flexbox.

Jurang flexbox

Mari kita bercakap tentang jurang dalam susun atur Flexbox, di mana perkara menjadi sedikit lebih rumit. Kami akan menggunakan contoh berikut:

 <code>.container { display: flex; }</code>

Secara lalai, ini akan memberi kita bekas Flex Flex, yang bermaksud bahawa item di dalam bekas disusun pada garis mendatar yang sama dari kiri ke kanan.

Dalam kes ini, column-gap digunakan di antara projek, dan row-gap tidak mempunyai kesan. Ini kerana hanya ada satu baris (atau garis). Tetapi sekarang mari kita tambahkan beberapa jurang antara projek:

 <code>.container { display: flex; column-gap: 10px; }</code>

Sekarang mari kita menukar flex-direction container ke lajur, yang menyusun item secara menegak dari atas ke bawah, menggunakan kod berikut:

 <code>.container { display: flex; flex-direction: column; column-gap: 10px; }</code>

Apa yang berlaku seterusnya:

Jurang hilang. Walaupun column-gap menambah ruang antara item apabila bekas berada dalam arah baris, ia tidak lagi berfungsi dalam arah lajur.

Kita perlu menggunakan row-gap untuk mengambilnya. Sebagai alternatif, kita boleh menggunakan singkatan gap dengan nilai yang akan menggunakan jurang yang sama dalam kedua -dua arah, jadi ia berfungsi dalam kedua -dua kes.

 <code>.container { display: flex; flex-direction: column; gap: 10px; }</code>

Oleh itu, dalam semua, column-gap sentiasa berfungsi secara menegak (dengan mengandaikan writing-mode lalai), row-gap sentiasa berfungsi secara mendatar. Ini tidak bergantung kepada orientasi bekas Flex.

Tetapi sekarang lihat contoh -contoh yang melibatkan rehat garis:

 <code>.container { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; justify-content: center; }</code>

Di sini, jika ruang tidak mencukupi untuk memegang segala-galanya dalam satu baris, kami membenarkan projek itu membungkus garisan pada pelbagai baris menggunakan flex-wrap: wrap .

Dalam kes ini, column-gap masih digunakan secara menegak di antara projek dan row-gap digunakan secara mendatar antara dua baris flex.

Terdapat perbezaan yang menarik antara ini dan grid. Jurang lajur tidak semestinya menyelaraskan baris flex. Ini kerana justify-content: center pusat projek dalam garis flexnya. Dengan cara ini, kita dapat melihat bahawa setiap barisan flex adalah susun atur yang berasingan dengan jurang yang digunakan secara bebas dari baris lain.

Jurang lajur berganda

Multicolumns adalah jenis susun atur yang menjadikannya sangat mudah untuk kandungan mengalir secara automatik antara pelbagai lajur, seperti yang anda harapkan dalam artikel akhbar tradisional. Kami menetapkan bilangan lajur dan menetapkan saiz untuk setiap lajur.

Jurang dalam susun atur pelbagai lajur tidak berfungsi sama seperti grid atau flexbox. Terdapat tiga perbezaan yang ketara:

• row-gap tidak mempunyai kesan.
• column-gap mempunyai nilai lalai yang bukan 0,
• Jurang boleh digayakan.

Mari kita pecahkan satu demi satu. Pertama, row-gap tidak mempunyai kesan. Dalam susun atur pelbagai lajur, tiada baris perlu dipisahkan. Ini bermakna hanya column-gap yang berkaitan (dan singkatan gap ).

Kedua, tidak seperti Grid dan Flexbox, nilai lalai column-gap dalam susun atur multi-kolumn adalah 1EM (bukan 0). Oleh itu, walaupun tidak ada jurang yang ditentukan sama sekali, lajur kandungan masih secara visual terpisah. Sudah tentu, ia boleh ditindih secara lalai, tetapi ini adalah lalai yang baik.

Berikut adalah kod di mana contohnya berdasarkan:

 <code>.container { column-count: 3; padding: 1em; }</code>

Akhirnya, kita boleh gaya ruang antara lajur dalam susun atur pelbagai lajur. Kami menggunakan harta column-rule , yang berfungsi sama dengan border :

 <code>.container { column-count: 3; column-gap: 12px; column-rule: 4px solid red; padding: 12px; }</code>

Sokongan penyemak imbas

gap telah disokong dengan baik dalam semua aspek. Terdapat lebih banyak maklumat mengenai Caniuse, tetapi ringkasnya:

• Flexbox: gap disokong di mana -mana kecuali Internet Explorer (akan dihapuskan), Opera Mini dan Pelayar UC untuk Android. CANIUSE mempunyai kadar sokongan global sebanyak 87.31%.
• Grid: Begitu juga, tetapi kita melihat penarafan kelulusan global sebanyak 93.79%.
• Lajur Pelbagai: Begitu juga, tetapi tidak disokong dalam Safari, dengan kadar sokongan global sebanyak 75.59%.

Jadi secara keseluruhan, harta gap disokong dengan baik dan dalam kebanyakan kes tiada penyelesaian diperlukan.

Tetapkan gaya jurang antara flex dan grid

Ia akan sangat berguna untuk gaya jurang antara flexbox dan grid CSS. Malangnya, ia tidak disokong di mana sahaja hari ini. Tetapi berita baiknya ialah ia dapat direalisasikan dalam masa terdekat. Ini telah dibincangkan dalam kumpulan kerja CSS dan sedang dibangunkan di Firefox. Sebaik sahaja kami mempunyai pelaksanaan yang berkesan dan cadangan spesifikasi di Firefox, ia boleh memacu pelaksanaan dalam pelayar lain.

Sementara itu, terdapat beberapa penyelesaian.

Salah satu cara ialah memberikan warna latar belakang ke dalam bekas grid, kemudian berikan projek warna yang berbeza, dan akhirnya meninggalkan jurang untuk membuat warna kontena muncul.

Walaupun ini berfungsi, ini bermakna kita tidak boleh menggunakan jurang untuk memperkenalkan ruang antara projek. Jurang di sini bertindak sebagai lebar sempadan. Oleh itu, untuk memisahkan item secara visual dengan lebih jelas, kita perlu menggunakan padding atau margin pada item, yang tidak sesuai ... seperti yang akan kita lihat di bahagian seterusnya.

Tidak bolehkah saya menggunakan margin atau padding?

Ya, dalam kebanyakan kes kita juga boleh menggunakan margin (dan/atau padding ) untuk menambah ruang visual antara elemen susun atur. Tetapi gap mempunyai beberapa kelebihan.

Pertama, jurang ditakrifkan pada tahap kontena . Ini bermakna kita menentukan mereka sekali untuk keseluruhan susun atur dan mereka sentiasa digunakan secara konsisten dalam susun atur. Gunakan margin perlu diisytiharkan pada setiap item. Ini boleh menjadi rumit apabila projek itu berbeza atau berasal dari komponen yang boleh diguna semula.

Perkara yang paling penting ialah gap hanya memerlukan satu baris kod untuk melaksanakan operasi yang betul secara lalai. Sebagai contoh, jika kita cuba memperkenalkan beberapa ruang antara projek flex dan bukannya mengelilinginya, margin memerlukan keadaan khas untuk menghapuskan margin tambahan sebelum projek pertama dan margin tambahan selepas projek terakhir. Menggunakan jurang, kita tidak perlu melakukan ini.

Menggunakan margin: 0 20px pada setiap projek Flex, kami akan mendapat:

Walau bagaimanapun, menggunakan gap: 40px pada bekas, kami akan mendapat:

Juga dalam susun atur grid, menentukan jurang di peringkat kontena adalah lebih mudah dan lebih baik daripada harus menentukan margin pada setiap item dan pertimbangkan margin yang digunakan untuk tepi grid.

Gunakan margin: 20px pada setiap projek grid:

Sebaliknya, gunakan gap: 40px pada bekas grid:

Pengumpulan ruang kosong

Berdasarkan segala yang dikatakan setakat ini, margin dan gap tidak perlu saling eksklusif. Malah, terdapat banyak cara untuk memisahkan projek susun atur lagi, dan mereka semua bekerja dengan baik bersama -sama.

Harta gap hanyalah sebahagian daripada ruang kosong yang dibuat di antara kotak dalam bekas susun atur. margin , padding dan penjajaran boleh meningkatkan ruang yang ditakrifkan gap .

Mari kita pertimbangkan contoh di mana kita membina susun atur flex yang mudah menggunakan lebar yang diberikan, beberapa jurang, beberapa pengedaran kandungan (menggunakan justify-content ), dan beberapa margin dan padding:

 <code>.container { display: flex; gap: 40px; width: 900px; justify-content: space-around; } .item { padding: 20px; margin: 0 20px; }</code>

Mari kita anggap kod ini menghasilkan hasil berikut:

Sekarang mari kita lihat dengan tepat bagaimana ruang kosong antara projek dicipta:

Seperti yang dapat kita lihat, terdapat empat jenis ruang kosong antara dua projek flex berturut -turut:

• Antara dua projek berturut -turut, jurang mentakrifkan ruang minimum antara projek -projek ini. Mungkin terdapat lebih banyak ruang, seperti dalam kes ini, tetapi tidak akan ada ruang yang kurang.
• Margin mendorong projek lebih jauh, tetapi tidak seperti jurang, ia menambah ruang di kedua -dua belah semua projek.
• Pengisian menyediakan ruang di dalam setiap projek.
• Akhirnya, dan hanya jika terdapat ruang yang cukup tersisa, pengedaran kandungan berkuatkuasa dan mengedarkan secara merata item dalam barisan Flex berdasarkan nilai space-around .

Debugging Gap

Mari berakhir dengan topik yang sangat dekat dengan saya: sokongan Devtools untuk jurang debug. Selalu akan ada kesilapan, dan sangat memuaskan untuk mengetahui bahawa Devtools dapat menyokong kita, tetapi kita perlu tahu alat mana yang dapat membantu kita.

Untuk gap , saya boleh memikirkan dua ciri khusus yang mungkin sangat berguna.

Adakah jurang saya sah?

Kecuali kami kehilangan gap atau memberikan nilai yang tidak sah, harta ini akan sentiasa digunakan pada halaman. Sebagai contoh, ini betul:

 <code>.some-class { display: block; gap: 3em; }</code>

Ia tidak akan melakukan apa -apa, tetapi ia sah CSS dan penyemak imbas tidak keberatan gap tidak berfungsi dengan susun atur blok. Walau bagaimanapun, Firefox mempunyai ciri yang dipanggil "CSS tidak aktif" yang melakukan ini: ia peduli tentang CSS yang berkesan yang digunakan untuk perkara yang masuk akal. Dalam kes ini, Firefox Devtools memaparkan amaran di Inspektor.

Di mana jurang saya?

Chrome dan Microsoft Edge juga mempunyai ciri jurang debugging yang sangat berguna. Ia ditambah melalui kerjasama antara Microsoft dan Google, dengan matlamat membina alat penyahpepijatan susun atur di Chromium, projek sumber terbuka yang menyokong kedua -dua pelayar dan pelayar lain. Dalam penyemak imbas ini, anda boleh melayang ke atas pelbagai sifat dalam panel Styles dan melihat bagaimana ia mempengaruhi halaman.

Itu sahaja. Saya harap artikel ini membantu memahami beberapa butiran tentang bagaimana pertengahan jurang bekerja di CSS.

Atas ialah kandungan terperinci Memikirkan 'jurang'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!