Flexbox 项目内部尺寸比例

Question

我开始自学web开发了。目前正在研究 JS 并尝试创建一个小的“etch-a-sketch”应用程序。我编写了一个代码，它创建了具有预定义“像素”大小的 canvas。它对我来说很好用。但是，为了使脚本文件尽可能窄，我想知道是否可以完全通过 CSS 中的 Flexbox 属性来设置像素的大小属性。从数学上讲，我希望父容器中的每个新元素都具有属性：Width = parentsWidth/nthChild、Height = Width（因此无论项目编号如何，每个项目始终都是最大的正方形）。

let initialValue = 100;
const radioValues = document.querySelectorAll('input[name=size]');
let pixelSize = initialValue;

// event listener for chosing size value and setting new canvas
for (let i = 0; i < 3; i++) {
  radioValues[i].addEventListener('click', function(e){
    initialValue = Number((e.target.value));
    pixelSize = initialValue;

    //erasing existing pixels
    if (document.querySelectorAll('.pixel').length > 0) {
      const existingPixel = document.querySelectorAll('.pixel')

      for(let i = 0; i < existingPixel.length;i++){
        existingPixel[i].remove();
      }
    }
    // building new pixels
    for (let i = 0; i < pixelSize; i++){
      let container = document.querySelector('.container');
      let pixel = document.createElement('div');
      pixel.setAttribute('class', 'pixel');

      // part to get rid of
      if (pixelSize == 400) {
        pixel.style.height = "25px";
        pixel.style.width = "25px";
      }

      if (pixelSize == 1600) {
        pixel.style.height = "12.5px";
        pixel.style.width = "12.5px";
      }

      container.appendChild(pixel);
    }
  })
}

.container {
  width: 500px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid grey;
  margin-top: 10%;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.pixel {
  height: 50px;
  width: 50px;
  border:1px solid grey;
  margin: 0;
  box-sizing: border-box;
}

<form>
  <input class="size_selection" type="radio" name="size" value="100" checked> <label for="size_selection">10x10</label>
  <input class="size_selection" type="radio" name="size" value="400"> <label for="size_selection">20x20</label>
  <input class="size_selection" type="radio" name="size" value="1600"> <label for="size_selection">40x40</label>
</form>
<div class="container"></div>
<button id="clear">Clear</button>

Answer 1

我刚刚重构了您的脚本以使用 css 网格和相应的 grid-template-rows 和 grid-template-columns 属性来匹配您的网格。

在此实例中使用网格可以更轻松地获得您想要的结果。

环顾四周，我不仅对 CSS 进行了一些更改，还对 HTML 和 JS 进行了一些更改。希望对你有帮助

let initialValue = 100;
const radioValues = document.querySelectorAll('input[name=size]');
let pixelSize = initialValue;
let container = document.getElementById('container');

// event listener for chosing size value and setting new canvas
for (let i = 0; i < 3; i++) {
  radioValues[i].addEventListener('click', function(e) {
    initialValue = Number((e.target.value));
    pixelSize = initialValue;

    //erasing existing pixels
    if (document.querySelectorAll('.pixel').length > 0) {
      const existingPixel = document.querySelectorAll('.pixel')

      for (let i = 0; i < existingPixel.length; i++) {
        existingPixel[i].remove();
      }
    }
    // building new pixels
    // setting the correct number of columns and rows in the grid
    container.style.gridTemplateColumns = 'repeat(' + pixelSize + ', 1fr)';
    container.style.gridTemplateRows = 'repeat(' + pixelSize + ', 1fr)';

    for (let i = 0; i < pixelSize * pixelSize; i++) {
      let pixel = document.createElement('div');
      pixel.classList.add('pixel');
      container.appendChild(pixel);
    }
  })
}

radioValues[0].click();

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

form {
 text-align: center;
 margin: 2rem auto;
}

#container {
  width: 300px;
  height: 300px;
  margin: 2rem auto;
  border: 1px solid grey;
  display: grid;
}

.pixel {
  border: 1px solid gray;
}

<body>
  <form>
    <input class="size_selection" type="radio" name="size" value="10" checked> <label for="size_selection">10x10</label>
    <input class="size_selection" type="radio" name="size" value="20"> <label for="size_selection">20x20</label>
    <input class="size_selection" type="radio" name="size" value="40"> <label for="size_selection">40x40</label>
  </form>
  <div id="container">
  </div>
  <button id="clear">Clear</button>
</body>

Flexbox 项目内部尺寸比例

Flexbox items internal size ratio

html

javascript

css