Verwenden von Flexbox zum Positionieren unbekannter Elemente in einem Raster mit minimaler Breite pro Element

Question

Ich fahre mit Express-Lenkstangen durch eine Reihe von Objekten und muss sie in einem Raster positionieren. Ich weiß jedoch nicht, wann ich eine neue Reihe machen soll, also glaube ich nicht, dass ich einen Tisch benutzen kann.

Ich möchte grundsätzlich eine flexible Anzahl von Zeilenelementen mit einer minimalen Breite pro Element. Ich verstehe, dass Flexbox mir dabei helfen kann. Ich habe mir einige Tutorials angesehen, aber ich kann anscheinend keine finden, die mir helfen würde, was ich erreichen muss.

Hier ist, was ich bisher:

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

und 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

Sie können eine min-Breite auf dem .Grid-cell Element hinzufügen.

Ohne Mindestbreite sollte das breiteste Element die Mindestbreite dieser Zelle angeben (Bild hier).

Element zu ermöglichen, breit genug, um zu wachsen, um seinen Inhalt zu passen, verwenden Sie die Kurz flex: flex: 1 1 auto; oder flex: 1 0 auto;

Demo unter

.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>