Bagaimana untuk menetapkan lebar subsenarai elemen flex:auto

Question

Hello, saya mempunyai masalah CSS. Terdapat dua lajur, lajur kanan (B) mempunyai lebar tetap 100px dan lajur kiri (A) mesti mengisi lebar yang tinggal. Selain itu, dalam lajur A, terdapat senarai subkomponen yang ditambah secara mendatar. Masalahnya ialah apabila menambah komponen anak, lebar lajur A menjadi lebih panjang dan lajur B menjadi lebih rendah. Bagaimanakah saya boleh menambah subkomponen pada baris bawah lajur A jika ia melebihi lebar lajur A? Apabila bilangan elemen kanak-kanak kurang Apabila bilangan elemen kanak-kanak bertambah (sebagaimana sedia ada) Apabila bilangan elemen kanak-kanak bertambah (TO-BE)

P粉146080556 · Answer

Anda boleh menggunakan grid paparan dan bukannya Flex. Menggunakan grid, anda boleh menentukan sama ada item itu dinamik atau statik.

Contoh:

.main {
  display: grid;
  grid-template-columns: 1fr 100px;
}


  
    I am dynamic in size
  
  
    I'll always be 100px

1fr dalam grid-template-columns mewakili ruang kosong, yang bermaksud bahawa semua ruang kecuali 100px elemen kedua akan diisi oleh elemen pertama.

P粉419164700 · Answer

Gunakan flex-wrap pada keseluruhan bekas dan A, dan tetapkan lebar kotak A kepada calc(100% - 100px).

body {
  width: 100vw;
  padding: 0;
  margin: 0;
  color: white;
}

#flex {
  display: flex;
  background-color: grey;
  width: 100vw;
  height: fit-content;
  flex-wrap: wrap;
}

#a {
  width: calc(100% - 100px);
  height: fit-content;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

#a .x {
  width: 100px;
  margin: 10px;
  background-color: green;
  height: 200px;
}

#b {
  width: 100px;
  height: 500px;
  background-color: blue;
}