Bagaimanakah saya boleh membuat susun atur dengan item bersaiz sama menggunakan CSS?

Membuat Reka Letak dengan Item Saiz Sama Menggunakan CSS

Matlamatnya adalah untuk mencapai susun atur di mana setiap item mempunyai lebar yang sama dengan yang paling luas elemen, tanpa mengira kandungannya. Reka letak ini boleh mempunyai berbilang baris dan balut item dengan sewajarnya.

Menggunakan JavaScript

Seperti yang ditunjukkan dalam contoh yang disediakan, JavaScript boleh dengan mudah menyelesaikan tugas ini dengan mengira lebar maksimum antara item dan kemudian menetapkan lebar itu kepada semua elemen.

Mencapai Reka Letak Yang Sama dengan CSS

Ia juga mungkin untuk mencapai reka letak ini menggunakan CSS tulen, tanpa memerlukan JavaScript. Begini caranya:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

CSS ini menggunakan gaya berikut:

• Bekas .list bertindak sebagai bekas yang membungkus senarai.
• Bekas . list bertanggungjawab untuk memaparkan item secara menegak.
• Item .list-item menggunakan gaya untuk setiap individu item.

Dengan menetapkan sifat flex-wrap untuk membalut dan menentukan kandungan justify sebagai flex-start dalam .list-item, kami memastikan item tersebut akan dibalut ke baris baharu apabila perlu, sementara mengekalkan justifikasi mereka hingga ke permulaan barisan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat susun atur dengan item bersaiz sama menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!