CSS |如果太宽，则网格模板行流

Question

我正在尝试制作一个动态的grid来定位其项目，如下所示：

• 具有固定的[[width
在宽度的限制中，一项接一项，并且应该这样做：
• 如果该项目的行中有空间（该项目不太宽，请将其放在行中，
• 否则：创建一个新行并将其放置在此处

我基本上是在尝试做这样的事情：

Answer 1

Flex会尽力使每一行保持均匀的高度

//random height/width 
for (let e of document.getElementsByClassName('boxe')) {
  var w = Math.floor(50 + Math.random() * 185) + 'px';
  var h = Math.floor(20 + Math.random() * 25) + 'px';
  e.style.minHeight = h;

  e.style.minWidth = w;
  e.innerHTML = 'min-width:' + w + '\n' + 'min-height: ' + h;
}

.flex.boxe {
  max-width: 100%;  /* might be needed*/
  
  /* demo purpose */
  box-shadow: 0 0 0 1px green, inset 0 0 0 1px green;
  margin: 1px;
  white-space: pre;
  font-size: 10px;
  width:auto;
  border:none;
  align-items:center;
  justify-content:center;
  /* end demo*/
}

.flex {
  display: flex;
  width: 500px;
  margin: 1em auto;
  border: solid #444 5px;
}

.wrap {
  flex-wrap: wrap;
}

<div class="flex wrap">
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
  <div class="flex boxe"></div>
</div>

Answer 2

这是为flexbox而不是网格所做的工作。好消息是，可以通过设置flex-wrap:wrap来轻松完成此操作：

html,body {height: 100%}

.flex {
  width: 200px;
  display: flex;
  height: 80vh;
  flex-wrap: wrap;
  border: solid 2px black;
  align-content: flex-start;
}

.flex div {
  height: 40px;
  border: solid 3px green;
}

.flex div:nth-child(5n+1) {flex-basis: 80px}
.flex div:nth-child(5n+2) {flex-basis: 40px}
.flex div:nth-child(5n+3) {flex-basis: 60px}
.flex div:nth-child(5n+4) {flex-basis: 20px}
.flex div:nth-child(5n+5) {flex-basis: 50px}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>