Próbuję uzyskać ładną siatkę Flexbox do użytku z produktami e-commerce, ale nie mogę tego zrobić, co chcę.

Oto demohttp://jsbin.com/acejes/9/edit

Może nie być możliwe, chciałem tylko sprawdzić, czy mogę coś jeszcze zrobić.

Oto mój cel…

Musi być siatką opartą na procentachPierwsza i ostatnia kolumna przylegają do boków konteneraOstatni wiersz „pływa” w lewo

Moje pytanie jest podobne doJak wyrównać lewy ostatni wiersz / linię w wielu wierszach Flexbox, ale w szczególności chcę użyć% s dla „kolumn” - myślę, że jest to czystsze i oznacza to, że wiem, że będę mieć, powiedzmy, 3 kolumny z rzędu, jeśli użyję% jak 32,5%

Jestem prawie na miejscu, ale ostatnia linia jest wyrzucana z powodu własności usprawiedliwiającej. Chciałbym, aby ostatni wiersz został „przeniesiony” w lewo:

Kod

Łatwiej jest zobaczyć mój kod w jsbin powyżej, ale ze względu na zachowanie, oto mała migawka:

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