html - 具有动态内容的 Flex 网格

Question

我需要一个解决方案，最有可能使用 Flexbox，用于内容网格，该网格需要灵活，具体取决于 CMS 中创建的对象数量。我知道 flex 可以用来创建每个单独的选项，如下所示，但是有没有一种方法可以在不知道 div 总数的情况下使用 flex 来显示布局？

Answer 1

is there a way I can use flex to show the layout without knowing the total number of divs?

只需申请flex:auto在所有子 div 上:

.row{
  display:flex;
  flex-wrap:wrap;
  width:330px;
}
.col{
  background-color:#D0D1D2;
  width:100px;
  height:100px;
  margin:5px;
  flex:auto;
}

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

让您选择 div 数量的演示示例:

range.addEventListener('input', function(){
  row.innerHTML = '<div class="col"></div>'.repeat(this.value);
  this.nextElementSibling.textContent = this.value;
})

.row{
  display:flex;
  flex-wrap:wrap;
  width:330px;
}
.col{
  background-color:#D0D1D2;
  width:100px;
  height:100px;
  margin:5px;
  flex:auto;
}

<div class="row" id="row">
  <div class="col"></div>

</div>

<input type="range" id="range" value="1" min="1" max="10"><output>1</output>