Mencapai penjajaran menegak (terima kasih, subgrid!)

Alat reka bentuk web moden telah meningkatkan keupayaan penjajaran menegak dengan ketara. Susun atur laman web awal, selalunya 960px lebar, sangat bergantung pada penjajaran mendatar menggunakan grid 12 lajur. Kemunculan pertanyaan media, sambil menyelesaikan banyak masalah, memperkenalkan cabaran baru, terutama mengenai penjajaran ketika unsur -unsur reflow atau reposisi.

Pertimbangkan senario biasa: "bar" yang mengandungi kumpulan butang, masing -masing dalam a<fieldset></fieldset> dengan a<legend></legend> . Pada skrin yang lebih besar, penjajaran adalah mudah. Pendekatan CSS yang mudah, menggunakan terapung, mengendalikan ini dan menyediakan tingkah laku responsif pada titik putus yang lebih kecil:

 . Aksesibiliti-alat Fieldset {
  lebar: 48%;
  Terapung: Kiri;
  margin-kanan: 1%;
}

/ * Mudah alih */
@media sahaja skrin dan (maksimum lebar: 480px) {
  . Aksesibiliti-alat Fieldset {
    Lebar: 100%;
  }
}

Walau bagaimanapun, pada skrin yang lebih kecil, misalignment menegak menjadi jelas. Walaupun lebar tetap, penyelesaian CSS berasaskan piksel menggunakan pertanyaan media boleh memaksa penjajaran, pendekatan ini tidak mempunyai fleksibiliti dan bergantung pada "nombor sihir" yang terikat dengan kandungan tertentu:

 / * Mudah alih */
@media sahaja skrin dan (maksimum lebar: 480px) {
  legenda {
    lebar: 160px;
  }
  butang {
    lebar: 130px;
  }
}

Ketidakhadiran ini, ditambah pula dengan pergantungan pada pertanyaan media (yang saya berhasrat untuk meminimumkan), memerlukan penyelesaian yang lebih mudah disesuaikan. Penyelesaian yang ideal harus membolehkan butang dan label untuk bertindak balas:

1. Ruang yang ada
2. Dimensi Kandungan
3. Unsur -unsur sekitar

Pertanyaan media jatuh pendek kerana mereka tidak menganggap ruang sekitarnya, seperti yang digambarkan dalam "The Flexbox Holy Albatross" Heydon Pickering. Tingkah laku yang diingini adalah untuk yang kedua<fieldset></fieldset> Untuk membungkus hanya apabila kedua -dua medan tidak lagi sesuai dengan satu baris.

Flexbox dan Grid: Percubaan Awal

Flexbox, dengan flex-wrap: wrap , menawarkan fleksibiliti yang lebih baik, membolehkan unsur-unsur mengalir ke pelbagai baris. Walau bagaimanapun, min-width masih sering diperlukan untuk penjajaran menegak yang sempurna.

Grid CSS, yang direka untuk pengurusan susun atur, menyediakan kata kunci auto-fit dan auto-fill (dalam repeat() ) untuk susun atur berbilang talian tanpa pertanyaan media. Menggunakan auto-fit , kami mencapai:

 .Wrapper-Toolbility-Tools {
  paparan: grid;
  grid-template-lajur: ulangi (auto-fit, 450px);
  Grid-Gap: 10px;
}

Walau bagaimanapun, nilai lebar mutlak mungkin masih diperlukan untuk penjajaran optimum. Trek grid fleksibel menggunakan unit fr atau minmax() menawarkan penambahbaikan selanjutnya, tetapi batasan timbul kerana hanya kanak -kanak langsung dari bekas grid dianggap item grid.

Penyelesaian subgrid

Tahap Grid CSS 2 memperkenalkan subgrid , membolehkan grid bersarang mewarisi saiz trek dari ibu bapa mereka. Ini menyelesaikan masalah grid bersarang bebas. Subgrid membolehkan unsur -unsur dalam grid kanak -kanak untuk bertindak balas terhadap kandungan dalam grid saudara.

Untuk contoh butang kami, grid induk ditakrifkan menggunakan auto-fill dan minmax() :

 .Wrapper-Toolbility-Tools {
  paparan: grid;
  Grid-template-lajur: ulangi (auto-fill, Minmax (150px, 1FR));
  Grid-Gap: 10px;
}

Grid Kanak -kanak Gunakan subgrid untuk mewarisi trek lajur ibu bapa:

 .sub-grid {
  paparan: grid;
  grid-lajur: span 3;
  Grid-template-lajur: subgrid;
  Align-item: pusat;
}

Ini memastikan penjajaran yang konsisten dan tingkah laku responsif. Butang dan label menyesuaikan diri dengan ruang yang ada, membungkus baris baru hanya apabila perlu.

Keserasian penyemak imbas dan bacaan selanjutnya

Sokongan penyemak imbas subgrid kini terhad (terutamanya Firefox). Pertanyaan Ciri CSS boleh memberikan sandaran untuk pelayar lain. Untuk maklumat keserasian penyemak imbas terperinci, rujuk Caniuse.com. Bacaan lanjut mengenai topik ini termasuk artikel oleh Miriam Suzanne, Rachel Andrew, dan Heydon Pickering (pautan yang disediakan dalam artikel asal). Pembungkus di sekitar ladang mungkin diperlukan untuk mengendalikan bug yang melibatkan elemen bentuk, grid, dan flexbox. Harta display FieldSet boleh ditetapkan kepada contents untuk menangani ini.

Atas ialah kandungan terperinci Mencapai penjajaran menegak (terima kasih, subgrid!). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!