Apabila elemen induk menjadi lebih kecil, kurangkan saiz padding

Question

Saya mempunyai grid yang melukis petak dalam sel. Ia mempunyai bilangan baris dan lajur, kemudian melukis sel grid dan menyemak sama ada perlu ada segi empat sama dalam setiap sel (mengikut tatasusunan) dan melukis segi empat sama jika perlu. Hasil akhir HTML kelihatan seperti ini: (dengan andaian saya mempunyai 1 baris dan 3 lajur, hanya 2 sel harus mempunyai segi empat sama)

.row {
  display: flex;
  flex-wrap: wrap;
  flex: 10000 1 0%;
}

.column {
  display: flex;
  flex-wrap: wrap;
  max-width: 100px;
  min-width: 10px;
  padding: 4px;
  border: 1px solid grey;
}

.square {
  background-color: red;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 5px;
}

<div class="row">
    <div class="column">
        <div class="square"></div>
    </div>
    <div class="column">
        <div class="square"></div>
    </div>
    <div class="column"></div>
</div>

Barisan mengambil keseluruhan lebar skrin dan saiz lajur hendaklah sama antara semua lajur dan berubah berdasarkan bilangan lajur pada skrin (contohnya jika saya mempunyai 5 lajur, semuanya harus disertakan dengan lebar 100 piksel tetapi jika saya mempunyai 1000 lajur, semuanya hendaklah 10 piksel lebar).

Masalah saya ialah padding dan jejari sempadan kelihatan pelik selepas titik putus tertentu dalam saiz lajur dan saya mahu menukar nilainya apabila saya mencapai titik putus itu. Saya tidak boleh menggunakan pertanyaan @container kerana ia masih tidak disokong sepenuhnya.

Jika ia membantu, saya menggunakan vue 2. Tetapi saya fikir penyelesaian CSS akan menjadi lebih baik dalam kes ini.

Answer 1

Cuba selesaikan masalah yang diterangkan:

Saya membuat demo kecil untuk membantu saya meneroka dengan lebih baik perkara yang diperlukan untuk mencapai senario ini.

Dapatkan sempadan: runtuh bersamaan pada item flexbox

.row 元素仍然是一个 Flexbox 容器，但它的 Flex 项目没有设置 border，而是使用 outline Tetapan untuk penggayaan.

Lakaran tidak mengambil ruang dan akan "runtuh" ​​apabila berlanggar dengan garis besar yang dihasilkan oleh elemen lain.

Jadi, untuk memastikan reka letak tidak dipengaruhi oleh gaya pelik, apabila cuba memaparkan sempadan item Flex, demo ini hanya bergantung pada 2 aspek utama untuk menjadikan sempadan tersebut:

• Tetapkan item fleksibel antara 间隙
• Tetapkan saiz 轮廓 untuk menutup jurang yang tertinggal di antara Elemen

.row {
  gap: var(--col-gap);
}
.column {
  outline: var(--col-gap) solid gray;
}

Gunakan ::selepas untuk menambah kandungan pada elemen

Selain itu, titik merah digunakan dengan position:absolute 的 ::after unsur pseudo, sekali lagi memastikan tiada apa-apa yang menjejaskan reka letak grid:

.column.square::after {
  position: absolute;
  content: '';
  background-color: red;
  
  width: 50%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

Papan Pemuka - Teroka Pilihan

Dari situ, saya menambah "papan pemuka" dengan position:fixed yang kekal di bahagian atas halaman dan membolehkan anda mengawal:

• Lebar Lajur (px) : Di sini anda boleh menetapkan lebar, menukar bilangan lajur setiap baris berdasarkan ruang bekas yang tersedia
• Bilangan lajur setiap baris: Di sini anda boleh menetapkan bilangan lajur setiap baris, menukar lebarnya mengikut ruang bekas yang tersedia Lebar
• Jurang antara sel (px): Jurang antara sel pada grid
• Togol keterlihatan titik merah: akan menunjukkan/menyembunyikan titik merah, sekali lagi menunjukkan display: none; 不会更改网格布局它完全取决于通过自定义变量 --col-width 设置的 .column saiz elemen
• Togol Keterlihatan Kaunter: Akan menunjukkan/menyembunyikan kaunter di atas setiap item fleksibel

Kesimpulan setakat ini:

Walaupun kami berusaha untuk meminimumkan gangguan dan mengambil semua langkah yang diperlukan untuk menyediakan susun atur grid dengan betul hanya berdasarkan saiz tetap sel, masih terdapat beberapa masalah dengan pemaparan dan kadangkala saiz sempadan garisan A tertentu corak ketidakpadanan biasa berlaku. Saya harus mengatakan bahawa saya hanya menghadapi masalah dengan paparan komputer riba, bukan monitor desktop , jadi itu satu lagi faktor.

Saya mencuba parameter yang berbeza dan mengecilkan nombor dalam demo, dengan mengambil kira jurang juga. Susun atur yang baik dan selamat boleh meminimumkan potensi masalah (contohnya, ia juga boleh meningkatkan saiz sempadan).

Saya tidak dapat pergi lebih jauh daripada ini menggunakan reka letak Flex.

const container = document.getElementById('container');

//draws the board
emptyElementAndFillWithColumns(container, 100);
//sets some columns randomly as .square
addRandomSquares(container);

//initializes the dashboard with the value coming from the css custom props
let columnsGap = parseInt(getCssCustomProp('col-gap'));
let columnsWidth = parseInt(getCssCustomProp('col-width'));
document.getElementById('gap').value = columnsGap;
document.getElementById('width').value = columnsWidth;
document.getElementById('width').dispatchEvent(new Event('change'));
document.getElementById('cols').value = Math.trunc(container.offsetWidth / (columnsWidth+columnsGap));

//input#width change event handler
document.getElementById('width')
  .addEventListener('change', event => {
    const width = parseInt(event.target.value);
    const newCols = Math.trunc(container.offsetWidth / (width+columnsGap));
    setCssCustomProp(container, 'col-width', `${width}px`);
    document.getElementById('cols').value = newCols;
  });

//input#cols change event handler
document.getElementById('cols')
  .addEventListener('change', event => {
    const cols = parseInt(event.target.value);
    const newWidth = Math.trunc(container.offsetWidth / cols) - columnsGap;
    setCssCustomProp(container, 'col-width', `${newWidth}px`);
    document.getElementById('width').value = newWidth;
  });
  
//input#gap change event handler
document.getElementById('gap')
  .addEventListener('change', event => {
    const gap = parseInt(event.target.value);
    setCssCustomProp(container, 'col-gap', `${gap}px`);
    columnsGap = gap;
  });
  
//input#toggle-dots change event handler
document.getElementById('toggle-dots')
  .addEventListener('change', event => {
    container.classList.toggle('hide-dots');
  });
  
//input#toggle-counters change event handler
document.getElementById('toggle-counters')
  .addEventListener('change', event => {
    container.classList.toggle('hide-counters');
  });

//sets the --propName custom property at the style of target
function setCssCustomProp(target, propName, value){
  target.style.setProperty(`--${propName}`, `${value}`);
}

//gets the --propName custom property value from the rule set on :root
function getCssCustomProp(propName){
  const propValue =
  getComputedStyle(document.documentElement).getPropertyValue(`--${propName}`);
  return propValue;
}

//resets the container and appends a count number of columns
function emptyElementAndFillWithColumns(target, count){
  for (i = 0; i  {
    if (Math.random() >= 0.5)
      column.classList.add('square');
  })
}

:root {
  --col-width: 100px;
  --col-gap: 1px;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--col-gap);
  counter-reset: itemnr;
}

.column {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: var(--col-width);
  height: var(--col-width);
  padding: 4px;
  outline: var(--col-gap) solid gray;
}

.column.square::after {
  position: absolute;
  content: '';
  background-color: red;
  
  width: 50%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

.dashboard {
  position: fixed;
  right: 1rem;
  top: 2rem;
  border: solid darkgray;
  padding: 1em;
  z-index: 100;
  background: gray;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  opacity: .9;
}

.dashboard > *{
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  gap: 1em;
}

.dashboard label{
}

.dashboard input[type="number"] {
  width: 5em;
  cursor: pointer;
}

.dashboard input[type="checkbox"] {
  width: 1rem;
  line-height: 1rem;
  cursor: pointer;
}

#container.hide-dots .square::after{
  display: none;
}

#container.hide-counters .column::before{
  display: none;
}

small{
  grid-column: 1 / -1;
  font-size:.8rem;
  text-align: center;
  width: 100%;
  margin-bottom: 1rem;
}

.column::before{
  position: absolute;
  counter-increment: itemnr; 
  content: counter(itemnr);
  font-size: .8rem;
  z-index: 10;
  font-weight: 600;
}

  

  
  




  

    column width (px):
    
  
  

    columns per row:
    
  
  

    gap between cells (px):
    
  
  

    toggle red dots visibility:
    
  
  

    toggle counter visibility: