How can I control the number of items per column in flexbox?

Viewed 13204

In a flex container I have 5 items with a column direction but in a certain width I want to display 3 per column and force the others to wrap
is there any way to do that without fixed height ?
my code :

<div class="container">
    <div class="item-1 item">Item 1</div>
    <div class="item-2 item">Item 2</div>
    <div class="item-3 item">Item 3</div>
    <div class="item-4 item">Item 4</div>
    <div class="item-5 item">Item 5</div>
</div>

.container {
    display: flex;
    flex-flow: column wrap;
}

@media (min-width: 30em) {

}

js Bin: http://jsbin.com/fesujifelu/edit?html,css,output

1 Answers
Related