CSS Grid 與 Flexbox：哪一個最適合用來建立響應式正方形？

使用動態方塊建立響應式網格佈局

您的目標是使用響應式方塊建立網格佈局，確保每個方塊的高度相等其寬度並由排水溝隔開。為此，您正在考慮使用 CSS 網格或 Flexbox。

CSS 網格

使用 CSS 網格，您可以定義網格的列和高度正方形的數量佔網格面積的百分比。以下是範例：

.square-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    gap: 10px;
}

.square {
    height: 100%;
}

Flexbox

使用 Flexbox，您可以使用 flex-wrap 屬性建立響應式佈局。為了確保正方形保持正方形的長寬比，您可以使用 padding-bottom 技巧或建立偽元素來設定適當的高度。

.square-container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    border: 1px solid;
    box-sizing: border-box;
}

.square::before {
    content: '';
    display: block;
    padding-top: 100%;
}

其他注意事項

• 要將文字在方塊內居中，您可以使用display: flex;具有justify-content 的屬性：center ;和align-items: center;。
• padding-bottom 技巧可能會在舊版瀏覽器中給出不可靠的結果。
• 為了確保一致的正方形長寬比，請將內容元素絕對放置在正方形內。

以上是CSS Grid 與 Flexbox：哪一個最適合用來建立響應式正方形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！