伸缩容器内的纵横比无法正常工作

Question

所以我在弹性容器中有一堆链接，并希望它们是正方形。我已经为所有

1 / 1

设置了宽高比，并添加了 1rem 的填充块。

.flex {
  display: flex;
  align-items: flex-start;
}

.link {
  border: 1px solid black;
  padding-block: 1rem;
  aspect-ratio: 1 / 1;
  display: block;
  text-align: center;
}

<div class="flex">
  <a class="link" href="#">1</a>
  <a class="link" href="#">2</a>
  <a class="link" href="#">3</a>
</div>

但这不起作用，链接根本不是正方形。当我更改填充块时，宽度会发生变化，因此由于纵横比属性而发生了一些事情，但链接仍然不是正方形。

另外，我做了一些测试，当带有

aspect-ratio: 1 / 1;

的元素内的内容增加高度时，长宽比不起作用，宽度不会改变。

您可以在我创建的笔中看到这些测试。

有没有办法让我的链接成为正方形，无论其内容的高度如何？

Answer 1

您缺少

box-sizing: border-box

来确保在根据您设置的比例设置宽度/高度时考虑填充和边框

.flex {
  display: flex;
}

.link {
  border: 1px solid black;
  padding-block: 1rem;
  aspect-ratio: 1;
  box-sizing: border-box;
}

<div class="flex">
  <a class="link" href="#">1</a>
  <a class="link" href="#">2</a>
  <a class="link" href="#">3</a>
</div>