Flexbox order of tiles with variable widths

Question

I have a grid of tiles I need to display.

Article tiles can fit 4 in a row.

Videos can fit 2 in a row.

The problem I'm running into is this: a row with article, article, article, video. The video is bumped to the next line.

Or article, video, video. Again the second video gets bumped to the next line.

Setting the order property seems to be a pain because the order that articles / videos are shown is totally random. Is there a a good way to handle this problem with flexbox?

Here's the fiddle - https://jsfiddle.net/nx4ap9u4/ (in this case I'm trying to have 2 blue blocks and green block in the first row, 4 blue blocks in the second row without me having to set the order with CSS or JS)

.blog-feeder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.article-preview.grid {
  flex-grow: 1;
  flex-basis: 25%;
  width: auto;
  margin-right: 15px;
  background: blue;
  height: 300px;
}

.article-preview.grid.post_VIDEO {
  flex-basis: 50%;
  background: green;
}

Flexbox order of tiles with variable widths

1 Answers