如何使用 Flexbox 建立完全響應式 CSS 正方形網格？

使用Flexbox 的CSS 正方形網格

我們的目標是使用CSS 和Flexbox 創建完全響應式的正方形網格，其中正方形可以完美縮放和調整以適應視窗寬度，同時保持正方形縱橫比，無論視口高度為何。

製作方形正方形

為了確保正方形保持其正方形形狀，我們利用 CSS 縱橫比屬性。此屬性允許我們指定元素的固有縱橫比，從而保留其尺寸。這是更新後的 CSS：

.flex-item {
  aspect-ratio: 1 / 1;
}

現在，方形將始終保持其正方形長寬比。

縮放正方形

要適當縮放正方形，我們使用Flexbox 中的 flex 屬性。 flex 屬性負責控制元素在其 flex 容器內的行為。以下是我們如何使用它：

.flex-item {
  flex: 1 0 auto;
}

• flex: 1 表示每個方塊將在容器內佔據相同的空間。
• 0 表示方塊不會縮小到低於其初始大小。
• auto 意味著方塊將增長以填充可用的空間

保持水平配合

即使使用Flexbox，如果視口變得太窄，正方形也可能會換行為多行。為了防止這種情況，我們將 Flex 容器的 justify-content 屬性設定為 space-around。這可確保方塊在容器內均勻分佈且對齊，而不會包裹。

更新了Flex 容器的CSS：

.flex-container {
  justify-content: space-around;
}

最終結果

透過實作這些技術，我們現在可以建立一個CSS 正方形網格，它可以完美地縮放和調整以適應視窗寬度。無論視口高度如何，正方形都會保持其方形縱橫比，從而確保一致且視覺上令人愉悅的佈局。

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