Question

我有一个空的div。

<div id="container"></div>

使用以下CSS：

#container{
    display: flex;
    position: relative;
    flex-flow: row wrap;
    width: 100%;
}

我希望通过divs插入更多JavaScript，但让用户选择容器的行数和列数。

目前这是我的代码：

var container = document.getElementById('container');

var rows = prompt("How much lines do you want?");
var columns = prompt("And how much columns do you want?");

for(var i = 0; i < rows; i++){
   for(var j = 0; j < columns; j++){
      var div = document.createElement("div");
      div.classList.add("square");
      div.innerHTML="<p>" + i + "</p>";
      container.appendChild(div);
   }
}

其中square类具有以下内容：

.square{
    flex: 1;
    height: 50px;
}

但容器内的所有div都显示在一行中。

我想要做的是将容器内的divs设置为与用户输入的尺寸相同，但我无法得到它。

是否可以将容器内的这些divs设置为用户指定的行/列？

注意：正如您所看到的，我仅使用JavaScript并且我想保留它，所以请避免使用插件/库/的答案等

Answer 1

如果您有N列，则一种解决方案是将flex-basis属性设置为100/N的百分比。

您可以在javascript中设置它而不使用库（根据需要）：

div.style['flex-basis'] = 100/columns + '%';

保持与您相同的设置，您只需在脚本中添加上一行，如下所示：

var container = document.getElementById('container');

var rows = prompt("How much lines do you want?");
var columns = prompt("And how much columns do you want?");

for(var i = 0; i < rows; i++){
   for(var j = 0; j < columns; j++){
      var div = document.createElement("div");
      div.classList.add("square");
      div.innerHTML="<p>" + i + "</p>";
      div.style['flex-basis'] = 100/columns + '%';
      container.appendChild(div);
   }
}

您可以使用codepen测试它：http://codepen.io/anon/pen/wGYKdY

Flexbox：显示给定列数和行数的元素

1 个答案: