Is it possible to create a 4x4 flexbox grid?

I'm attempting to create a 4x4 flexbox grid. Each of the four boxes should have the same vertical height, but stack two per row from left to right. Is this possible?

(Resize your browser between 960 and 640 to see my attempt: http://www.joshuasortino.com/index-new or view how I would like it to work: http://www.joshuasortino.com/index)

Edit: This effect is possible by creating two containers (one 开发者_开发百科for each row) but I would prefer to only use one wrapper/container.

There's nothing wrong with your boxes. You are just running into trouble because your svg images are rendering with a lot of extra vertical space. Just add height/width styles like you were on the old version.

Change this:

<object data="public/images/charts/routine.svg" type="image/svg+xml" class="chart">

To this:

<object data="public/images/charts/routine.svg" type="image/svg+xml" class="chart" style="width: 482px; height: 265px;">

And change this:

<object data="public/images/charts/skills.svg" type="image/svg+xml" class="chart"> 

To this:

<object data="public/images/charts/skills.svg" type="image/svg+xml" class="chart" style="width: 482px; height: 265px;">

Ideally, you'd use styles and css to set these attributes, I just in-lined them for demo purposes

It appears there is an element which can solve the issue. Unforuntately it is not widely supported at this time.

-webkit-box-lines: multiple;

Supossedly allows flexbox DIVs to span multiple rows.