如何创建灵活的表格式布局？

Question

我想创建一个看起来像桌子的布局，但是根据浏览器窗口的宽度，列数可以流畅地改变。

目前，我使用flexbox显示来模拟流体柱的效果，但我不知道如何使行之间的flex项的宽度保持一致。以下是HTML代码示例：

<a>image</a>
<ul>
    <li>dsdfsdfd dsfdf sdfsdf sdfsd</li>
    <li><span>sdfsdds</span><span>sdfsdds</span></li>
    <li><span>sdfsdd dgdfgfgd dg dfdfs</span><span>sdfsdds</span><span>sdfsdds</span></li>
    <li>dsdfsdfd dsfdf sdfsdf sdfsd</li>
    <li><span>sdfsdg fg fg ds</span><span>sdfsdds</span></li>
    <li>dsdfsdfd dsfdf sdfsdf sdfsd</li>
</ul>

以下是CSS示例：

a {
    float: right;
    height: 150px;
    width: 150px;
    background: cyan;
}
ul {
    padding: 0px;
}
li {
    outline: 1px solid red;
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

li span {
    outline: 1px solid blue;
    flex: 1 1 auto;
    min-width: 50px;
}

请参阅此JSFiddle demo以更好地了解我要实现的目标。任何帮助深表感谢。感谢。