时间戳

首页 > 解决方案 > 使用 flexbox 的动态网格布局

css - 使用 flexbox 的动态网格布局

问题描述

我打算根据用户输入进行网格布局。例如，如果用户输入值“3”，则 3 x 3 的正方形会像井字棋游戏布局一样动态放置在页面上。我认为 flexbox 是一个很好的方法。但是，根据输入值，每个单元格的宽度和高度会有所不同。我听说通过设置 .px 来控制尺寸不是可取的方式。我研究了很多示例，但我还找不到动态布局示例。你对这个问题有什么建议吗？

我尝试过的方式如下所示。在这里，我使用了 bootstrap，但我意识到我不需要使用它，因为 gridcss 或 flexbox 已经提供了该功能。无论如何，在制作 html 字符串后，我将它们放入容器中，但正如您所料，高度远小于宽度。我想做的是自己调整宽度和高度，有什么好方法呢？我不想直接设置 px 值。

for (var i = 0; i < num; i++) {
        html += '<div class="row">';
        for (var j = 0; j < num; j++) {
          html += `
            <div class="col-md-1">0</div>`;
        }
        html += "</div>";
}

标签： cssflexbox

解决方案

假设这里的部分问题是在棋盘内创建具有 1:1 纵横比的单元格。

为此，您可以使用一个漂亮的 CSS 技巧，将单元格嵌入到另一个具有padding-top: 100%;.

padding-top是相对于父元素的width，因此100%纵横比的值将始终为 1:1

工作 jsFiddle 示例

推荐阅读