方阵的高和宽

Question

我想表示一个矩阵，其中 x=y。 (3x3, 5x5) 在固定宽度和高度的容器中。

我的问题是我无法动态地对单个单元格进行平方。我的身高一直有问题

我的目标是将各个字段分布在整个高度上。

我的代码：

.playground {
  width:600px;
  height: 600px;
  background: gray;
}
.row {
  display:flex;
  min-height:10%;
}
.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}

<h2>3x3</h2>
<div class="playground bg-img">

  <div class="row">
    <div class="cell " id="a1">1</div>
    <div class="cell " id="a2">2</div>
    <div class="cell " id="a3">3</div>            
  </div>

  <div class="row">
    <div class="cell " id="b1">4</div>
    <div class="cell " id="b2">5</div>
    <div class="cell " id="b3">6</div>
  </div>
  <div class="row">
    <div class="cell " id="c1">7</div>
    <div class="cell " id="c2">8</div>
    <div class="cell " id="c3">9</div>
  </div>

</div>

Answer 1

您可以使用 CSS 网格布局。

.playground {
  display:grid;
  grid-template-rows: 1fr 1fr 1fr;
  width:800px;
  height: 600px;
  background: gray;
}
.row {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}

<h2>3x3</h2>
<div class="playground bg-img">

  <div class="row">
    <div class="cell " id="a1">1</div>
    <div class="cell " id="a2">2</div>
    <div class="cell " id="a3">3</div>            
  </div>

  <div class="row">
    <div class="cell " id="b1">4</div>
    <div class="cell " id="b2">5</div>
    <div class="cell " id="b3">6</div>
  </div>
  <div class="row">
    <div class="cell " id="c1">7</div>
    <div class="cell " id="c2">8</div>
    <div class="cell " id="c3">9</div>
  </div>

</div>

并且可以简化为：

.playground {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  
  width:800px;
  height: 600px;
  background: gray;
}

.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}

<div class="playground bg-img">

  <div class="cell " id="a1">1</div>
  <div class="cell " id="a2">2</div>
  <div class="cell " id="a3">3</div>

  <div class="cell " id="b1">4</div>
  <div class="cell " id="b2">5</div>
  <div class="cell " id="b3">6</div>

  <div class="cell " id="c1">7</div>
  <div class="cell " id="c2">8</div>
  <div class="cell " id="c3">9</div>

</div>

Answer 2

让你的整个容器在 column 方向上弯曲，在你的行和单元格上设置 flex: 1 以便它们伸展以覆盖它们的父级

/* This code is only here for dynamic size testing, it's not actually part of the solution */

window.addEventListener('DOMContentLoaded', e => {

  let size = 3;

  document.querySelector('#size-selector').addEventListener('click', e => {
    size = parseInt(e.target.value);
    updateSize();
  });

  function updateSize() {

    const title = document.querySelector('h2');
    title.innerHTML = `${size}x${size}`;

    const grid = document.querySelector('.playground');

    grid.innerHTML = "";
    for (let i = 0; i < size; i++) {
      const row = makeRow(grid);
      const cells = row.querySelectorAll('.cell');
      for (let j = 0; j < size; j++) {
        cells[j].innerHTML = i * size + j + 1;
      }
    }

  }

  function makeRow(grid) {
    const r = document.createElement('div');
    r.classList.add('row');
    for (let i = 0; i < size; i++) {
      makeCell(r);
    }
    grid.appendChild(r);
    return r;
  }

  function makeCell(row) {
    const c = document.createElement('div');
    c.classList.add('cell');
    row.appendChild(c);
    return c;
  }

});

.playground {
  width: 600px;
  height: 600px;
  background: gray;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1;
  background-color: red;
}

.cell {
  background: green;
  border: 1px solid #ccc;
  flex: 1;
}

<h2>3x3</h2>
<input type="number" value="3" min="1" id="size-selector" style="margin: 1em;" />
<div class="playground bg-img">

  <div class="row">
    <div class="cell " id="a1">1</div>
    <div class="cell " id="a2">2</div>
    <div class="cell " id="a3">3</div>
  </div>

  <div class="row">
    <div class="cell " id="b1">4</div>
    <div class="cell " id="b2">5</div>
    <div class="cell " id="b3">6</div>
  </div>

  <div class="row">
    <div class="cell " id="c1">7</div>
    <div class="cell " id="c2">8</div>
    <div class="cell " id="c3">9</div>
  </div>

</div>

Answer 3

您可以强制每个单元格的纵横比为正方形。

.playground {
  width:600px;
  height: 600px;
  background: gray;
}
.row {
  display:flex;
  min-height:10%;
}
.cell {
  background: green;
  width:100%;
  aspect-ratio: 1 / 1;
  border:1px solid #ccc;
}

<h2>3x3</h2>
<div class="playground bg-img">

  <div class="row">
    <div class="cell " id="a1">1</div>
    <div class="cell " id="a2">2</div>
    <div class="cell " id="a3">3</div>            
  </div>

  <div class="row">
    <div class="cell " id="b1">4</div>
    <div class="cell " id="b2">5</div>
    <div class="cell " id="b3">6</div>
  </div>
  <div class="row">
    <div class="cell " id="c1">7</div>
    <div class="cell " id="c2">8</div>
    <div class="cell " id="c3">9</div>
  </div>

</div>

方阵的高和宽

Height and width of a square matrix

html

css

flexbox