如何使用 Flexbox 创建完美正方形的 CSS 网格？

使用 Flexbox 的 CSS 正方形网格

在您提供的代码片段中，您已使用 Flexbox 创建了一个正方形网格。然而，它们的形状不是方形的，并且当视口高度改变时它们的高度也会改变。

要实现所需的布局，您需要将名为aspect-ratio的CSS属性应用于每个方形元素。纵横比属性强制元素保持特定的宽高比。在您的情况下，您希望正方形是正方形，因此您应该将纵横比设置为 1 / 1。

更新后的代码如下所示：

.flex-item {
  aspect-ratio: 1 / 1;
  /* Rest of your styles here */
}

通过设置纵横比属性，无论视口的宽度或高度如何，您的正方形将始终保持正方形形状。

以上是如何使用 Flexbox 创建完美正方形的 CSS 网格？的详细内容。更多信息请关注PHP中文网其他相关文章！