Bagaimana untuk melaksanakan bekas Div dengan ketinggian baris penyesuaian dan kiraan baris menggunakan susun atur CSS atau Flex?

Cara menggunakan grid CSS atau Flexbox untuk membuat bekas div dengan ketinggian baris penyesuaian dan bilangan baris? Mari kita meneroka kedua-dua:

menggunakan grid CSS:

grid CSS cemerlang dalam menguruskan susun atur dua dimensi. Untuk membuat div dengan ketinggian baris penyesuaian dan bilangan baris, anda hanya menentukan bekas sebagai grid dan biarkan kandungan menentukan bilangan baris dan ketinggian masing -masing. Grid secara automatik mengendalikan saiz baris berdasarkan kandungan dalam setiap baris.

membolehkan grid menyesuaikan bilangan lajur secara automatik berdasarkan lebar skrin yang tersedia.

memastikan bahawa setiap lajur mempunyai lebar minimum 200px dan kemudiannya akan berkembang untuk mengisi ruang yang tersedia secara proporsional (

). Baris secara automatik akan menyesuaikan ketinggian mereka untuk menampung kandungan di dalamnya. Anda tidak perlu secara eksplisit menentukan bilangan baris.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust minmax values as needed */
  grid-gap: 10px; /* Adjust gap as needed */
}

.item {
  background-color: #f0f0f0;
  padding: 10px;
}

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); Menggunakan Flexbox: repeat(auto-fit, ...) minmax(200px, 1fr) 1fr Flexbox terutamanya direka untuk susun atur satu dimensi (sama ada baris atau lajur). Walaupun anda boleh membuat susun atur berbilang baris dengan Flexbox, menguruskan ketinggian baris yang berlainan memerlukan lebih banyak intervensi manual. Anda biasanya menggunakan

untuk membolehkan item membungkus ke pelbagai baris. Walau bagaimanapun, mengawal ketinggian baris individu secara langsung kurang intuitif daripada dengan grid. Walau bagaimanapun, anda mempunyai kawalan langsung yang kurang ke atas ketinggian baris; Mereka hanya akan ditentukan oleh item tertinggi dalam setiap baris.

dengan dan penciptaan baris tersirat secara automatik mengendalikan bilangan baris yang diperlukan untuk menampung kandungan. Ketinggian setiap baris menyesuaikan secara automatik agar sesuai dengan kandungannya. Tiada JavaScript diperlukan untuk tingkah laku dinamik ini.

Flexbox: Flexbox's flex-wrap: wrap; membolehkan item membungkus ke pelbagai baris seperti yang diperlukan. Bilangan baris menyesuaikan secara dinamik berdasarkan kandungan dan lebar kontena. Walau bagaimanapun, kawalan tepat ke atas ketinggian baris individu kurang langsung daripada dengan grid. Anda mungkin perlu menggunakan JavaScript jika anda memerlukan pelarasan ketinggian baris yang lebih canggih di luar ketinggian semulajadi yang ditentukan oleh item tertinggi dalam setiap baris. Berikut adalah amalan terbaik untuk kedua -dua:

amalan terbaik grid CSS:

Gunakan

:

Ini memastikan responsif dalam saiz skrin yang berbeza. Laraskan
• untuk mengawal lebar lajur minimum. grid-template-columns: repeat(auto-fit, minmax(min-width, 1fr)); Pertimbangkan min-width:
Harta ini membolehkan anda menetapkan ketinggian baris minimum. Jika anda mahu baris sekurang -kurangnya ketinggian tertentu walaupun kandungannya lebih pendek, gunakan ini. Amalan terbaik (untuk ketinggian baris berubah -ubah):
• grid-auto-rows Lajur. Ini umumnya kurang elegan daripada menggunakan grid untuk tujuan ini. Inilah caranya untuk menghalang mereka:
  • Gunakan overflow: auto; atau overflow: scroll;: Ini akan menambah bar scrollar ke bekas jika kandungan melebihi sempadannya. auto menambah bar scroll hanya apabila diperlukan, sementara scroll selalu menunjukkannya. Gunakan ini pada bekas induk. Jika ketinggian tidak ditetapkan secara eksplisit dan kandungannya lebih tinggi daripada ruang yang tersedia, ia akan melimpah. Pastikan susun atur anda menyesuaikan dengan anggun ke saiz skrin yang berbeza, mencegah kandungan dari melimpah pada skrin yang lebih kecil. Ini terbaik dicapai dengan menggunakan teknik yang digariskan dalam bahagian sebelumnya. Ini sering melibatkan mengukur ketinggian kandungan dan menyesuaikan sifat CSS dengan sewajarnya. Walau bagaimanapun, ia biasanya lebih disukai untuk mengendalikan ini menggunakan grid CSS atau flexbox apabila mungkin.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan bekas Div dengan ketinggian baris penyesuaian dan kiraan baris menggunakan susun atur CSS atau Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!