Eu estou tentando obter uma grade de Flexbox agradável para usar com produtos de comércio eletrônico, mas não consigo fazer isso para fazer o que eu quero.

Aqui está uma demonstraçãohttp://jsbin.com/acejes/9/edit

Pode não ser possível, eu só queria verificar se há mais alguma coisa que eu possa fazer.

Aqui está o meu objetivo ...

Deve ser uma grade baseada em porcentagemA primeira e última coluna encostada nos lados do contêinerA última linha "flutua" à esquerda

Minha pergunta é meio semelhante aComo alinhar a última linha / linha esquerda em várias linhas flexbox, mas eu especificamente quero usar% s para as "colunas" - eu acho que é mais arrumado e isso significa que eu sei que vou ter, digamos 3 colunas seguidas se eu usar um% como 32,5%

Estou quase lá, mas a última linha está sendo descartada por causa da propriedade justify-content. Eu gostaria que a última linha fosse "flutuada" para a esquerda:

Código

É mais fácil ver meu código no jsbin acima, mas por uma questão de preservação, aqui está um pequeno instantâneo:

<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%;
}