Estoy tratando de obtener una buena cuadrícula Flexbox para usar con productos de comercio electrónico, pero no puedo hacer que haga lo que quiero.

Aquí hay una demo.http://jsbin.com/acejes/9/edit

Puede que no sea posible, solo quería comprobar si hay algo más que pueda hacer.

Aquí está mi objetivo ...

Debe ser una cuadrícula basada en porcentajeLa primera y última columna a ras contra los lados del contenedorLa última fila "flota" a la izquierda

Mi pregunta es similar aCómo alinear la última fila / línea izquierda en flexbox de múltiples líneas, pero específicamente quiero usar% s para las "columnas". Creo que está más limpio y significa que sé que voy a tener, digamos 3 columnas seguidas si uso un% como 32.5%

Ya casi estoy allí, pero la última línea se está descartando debido a la propiedad justify-content. Me gustaría que la última fila se "flotara" a la izquierda:

Código

Es más fácil ver mi código en el jsbin anterior, pero para preservarlo, aquí hay una pequeña instantánea:

<div id="flexbox">
    <div class="column">
        <img src="http://placehold.it/350x150" title="" alt="" />
    </div>
    <div class="column">
        <p class="product-title">Decorated Pink High Heels</p>
        <p class="product-price">$25.99</p>
        <p class="product-title">Decorated Pink High Heels</p>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

#flexbox {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
    border: 3px solid black;
}

#flexbox .column {
    width: 22%;
    margin-bottom: 30px;
    background-color: red;
}

img {
  max-width: 100%;
}