Jurang? Terkejut!

Pada mulanya, terdapat Flexboxes (kanak -kanak paparan: Flex Container). Sekiranya anda mahu mereka terpisah secara visual, anda terpaksa menggunakan justifikasi kandungan (iaitu Kandungan Justify: Space-Between), Margin Trickery, atau kadang-kadang, kedua-duanya. Kemudian bersama-sama datang grid (paparan: bekas grid), dan grid mungkin tidak mempunyai jurang minimum yang tidak margin antara sel grid, terima kasih kepada grid-jurang. Flexboxes tidak mempunyai jurang.

Sekarang mereka boleh, terima kasih kepada sokongan GAP yang semakin meningkat, pengganti grid-jurang yang tidak terhad kepada grid. Dengan GAP, anda boleh jurang grid anda, kotak flex anda, dan juga lajur berganda anda. Ini Gaptastic!

Jurang dengan grid

Mari kita mulakan di mana GAP adalah yang paling mantap: grid CSS. Berikut adalah persediaan grid asas dalam HTML dan CSS:

 <section>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
</section>

 Bahagian {
  paparan: grid;
  grid-template-baris: ulangi (2, auto);
  grid-template-lajur: ulangi (4, auto);
  Jurang: 1em;
}
bahagian div {
  lebar: 2EM;
}

Itu menempatkan sel -sel grid sekurang -kurangnya 1EM selain satu sama lain. Jarak pemisahan boleh lebih besar daripada itu, bergantung kepada keadaan lain di luar skop jawatan ini, tetapi sekurang -kurangnya mereka harus dipisahkan oleh 1EM. .

Ini semua berfungsi kerana jurang sebenarnya tersendiri untuk jurang baris dan jurang lajur. Jurang: 1em ditafsirkan sebagai jurang: 1em 1em, yang tersendiri untuk jurang: 1EM; Lajur-jurang: 1em;. Jika anda mahukan jarak baris dan jarak lajur yang berlainan, maka sesuatu seperti Gap: 0.5em 1em akan dilakukan dengan baik.

Jurang dengan Flexbox

Melakukan perkara yang sama dalam konteks Flexbox memberi anda jurang, tetapi tidak dengan cara yang sama seperti mereka berlaku dalam grid. Anggapkan HTML yang sama seperti di atas, tetapi CSS ini sebaliknya:

 Bahagian {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
  Jurang: 1em;
}

Flexboxes dipecat oleh sekurang-kurangnya nilai jurang di sini, dan (terima kasih kepada Flex-Wrap) bungkus ke garisan Flex baru apabila mereka kehabisan ruang di dalam bekas Flex mereka. Mengubah jarak jurang boleh menyebabkan perubahan dalam pembalut item flex, tetapi tidak seperti dalam grid, perubahan jurang antara item flex tidak akan mengubah saiz item flex. Perubahan jurang boleh menyebabkan pembungkus flex berlaku di tempat yang berbeza, yang bermaksud bilangan item flex per baris akan berubah, tetapi lebar akan tetap sama (kecuali jika anda telah menetapkannya untuk berkembang atau mengecut melalui flex, iaitu).

Jurang dengan pelbagai lajur

Dalam kes kandungan multicolumn, terdapat sedikit sekatan pada jurang: hanya jurang lajur yang digunakan. Anda boleh mengisytiharkan jurang baris untuk multicolumn jika anda mahu, tetapi mereka akan diabaikan.

 Bahagian {
  Lajur: 2;
  Jurang: 1em;
}

Sokongan

Sokongan untuk jurang, jurang baris, dan jurang lajur sangat meluas. Mozilla mempunyai mereka sejak versi 61, Chromium sejak versi 66, dan terima kasih untuk bekerja oleh Sergio Villar dari Igalia, mereka datang ke safari dan safari mudah alih tidak lama lagi (mereka sudah dalam pratonton teknologi dibina). Jadi jika kandungan grid, flex, atau multicolumn anda memerlukan sedikit ruang untuk bernafas, bersiaplah untuk jatuh ke dalam jurang!

Atas ialah kandungan terperinci Jurang? Terkejut!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!