使用 Flexbox 的 CSS 正方形網格
在您提供的程式碼片段中，您已使用 Flexbox 建立了一個正方形網格。然而，它們的形狀不是方形的，並且當視口高度改變時它們的高度也會改變。
要實現所需的佈局，您需要將名為aspect-ratio的CSS屬性套用到每個方形元素。縱橫比屬性強制元素保持特定的寬高比。在您的情況下，您希望正方形是正方形，因此您應該將縱橫比設為 1 / 1。
更新後的程式碼如下所示：
.flex-item {
aspect-ratio: 1 / 1;
/* Rest of your styles here */
}透過設定縱橫比屬性，無論視窗的寬度或高度如何，您的方形將始終保持正方形形狀。
以上是如何使用 Flexbox 創建完美正方形的 CSS 網格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
