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中文网其他相关文章！