使用纯CSS将元素高度设置为等于flex宽度

Question

我想连续创建 n 单元格。所有这些单元都具有弯曲宽度。我希望这些单元格的高度始终与当前宽度相同。

我的伪代码

const cellsPerRow = 7; // just a number

$(document).ready(() => {
  for (var i = 0; i < cellsPerRow; i++) {
    const div1 = $("<div></div>");
    div1.addClass("box");
    div1.html(i);
    $("#container1").append(div1);

    const div2 = $("<div></div>");
    div2.addClass("box");
    div2.html(i);
    $("#container2").append(div2);
  }
});

.container {
  display: flex;
}

.box {
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1" class="container">

</div>

<div id="container2" class="container">

</div>

当然我可以在创建这些盒子时设置高度但是它们必须保持动态，因为如果盒子的宽度发生变化，我希望高度也会改变。

Answer 1

您可以考虑使用百分比值填充：

＆＃13;

＆＃13;

const cellsPerRow = 7; // just a number

$(document).ready(() => {
  for (var i = 0; i < cellsPerRow; i++) {
    const div1 = $("<div></div>");
    div1.addClass("box");
    div1.html(i);
    $("#container1").append(div1);

    const div2 = $("<div></div>");
    div2.addClass("box");
    div2.html(i);
    $("#container2").append(div2);
  }
});

＆＃13;

.container {
  display: flex;
}

.box {
  flex: 1;
  display:inline-flex;
  justify-content:center;
  height:0;
  line-height:0;
  /*we divide by cellsPerRow and we remove the border*/
  padding-top:calc((100% / 7) / 2 - 1px); 
  padding-bottom:calc((100% / 7) / 2 - 1px);
  box-sizing:border-box;
  border:1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1" class="container">

</div>

<div id="container2" class="container">

</div>

＆＃13;

＆＃13;

＆＃13;