使用flexbox在网格中定位每个元素的最小宽度的未知数量的元素

Question

我正在使用Express把手循环一堆对象，我需要将它们放置在网格中。然而，我不知道什么时候该做一个新的行，所以我不认为我可以使用一个表。

我基本上想要灵活数量的行项目，每个项目的最小宽度。我了解flexbox可以帮助我实现这一点。我查阅了一些关于使用它的教程，但似乎找不到一个能帮助我实现我需要的教程。

这是我到目前为止有：

<div class="Grid"> 
    {{#each projects}} 
     <div class="Grid-cell project"> 
      <img class="projectMainImage" src="/mi/{{this.mainImage}}" /> 
     </div> 
    {{/each}} 
</div> 

和CSS：

.Grid { 
    display: flex; 
    flex-flow: row wrap; 
    align-content: flex-start; 
} 
.Grid-cell { 
    flex: 1; 
    flex-grow: 1; 
} 
*, *:before, *:after { 
    box-sizing: border-box; 
} 

Answer 1

您可以将.Grid-cell元素上添加一个最小宽度。

没有最小宽度，最宽的元素应该给出该单元格的最小宽度（图像在这里）。

要允许元件足够宽以适应其内容的增长，使用速记弹性：flex: 1 1 auto;或flex: 1 0 auto;

演示下面

.Grid { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-content: flex-start; 
 
} 
 

 
.Grid-cell { 
 
    flex: 1 1 auto; 
 
    min-width: 10vw; 
 
    line-height: 10vw; 
 
    border: solid; 
 
    margin: 1em; 
 
    text-align: center; 
 
} 
 

 
img { 
 
    vertical-align: middle; 
 
    /*eventually*/ 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
}

<div class="Grid"> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/250/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
     <div class="Grid-cell project"> 
 
      <img class="projectMainImage" src="http://lorempixel.com/150/100" /> 
 
     </div> 
 
</div>