如何使用 Flexbox 創建完美正方形的 CSS 網格？

使用 Flexbox 的 CSS 正方形網格

在您提供的程式碼片段中，您已使用 Flexbox 建立了一個正方形網格。然而，它們的形狀不是方形的，並且當視口高度改變時它們的高度也會改變。

要實現所需的佈局，您需要將名為aspect-ratio的CSS屬性套用到每個方形元素。縱橫比屬性強制元素保持特定的寬高比。在您的情況下，您希望正方形是正方形，因此您應該將縱橫比設為 1 / 1。

更新後的程式碼如下所示：

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

透過設定縱橫比屬性，無論視窗的寬度或高度如何，您的方形將始終保持正方形形狀。

以上是如何使用 Flexbox 創建完美正方形的 CSS 網格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！