CSS Flex column排列时的容器宽度问题

最近在学习Flex布局，想模仿小米首页的商品Tab页效果：

仔细推敲可以发现，图中商品的陈列方式并不是一行一行的，而是一列一列的。当第一列排满后，剩下的一项“彩虹7号电池”会被排到第二列。

DOM的文档流通常是从左到右、自上而下横向排列元素的。像这种列式排列的，可以用JavaScript实现。但如果想用纯CSS实现，就会有些难度。

你可能首先会想到使用Flex布局，把主轴方向设置为垂直方向。虽然这样商品竖着排列了，但是你会发现，随着商品列数的增加，外层的容器并不会自动变宽

这是Flex布局设计上的一个问题，可以参考这个StackOverflow提问。这里还有个DEMO更直观地阐述了这个问题：jsFiddle链接。

解决这个问题的办法有不少，对比下来最巧妙的办法就是：完全不考虑用Flex布局，利用writing-mode属性就能搞定。writing-mode是个平时用得很少的属性，原本是用来方排版竖向的文字，如中国古诗词。对writing-mode的历史感兴趣的话可以阅读 张鑫旭大神的文章。

writing-mode既然能让文字竖着排，也就能让容器内的元素竖着排。给商品列表的外层容器加上writing-mode属性，就能解决容器宽度的问题：

.tab-pane {
    // lr可理解为left to right，即垂直方向上从左到右
    writing-mode: vertical-lr; 
}

似乎不太对，容器内的所有元素都继承了竖向排版，没关系，把容器内的元素writing-mode重置成通常文档流的方向：

.tab-pane-items {
    // tb可理解为top to bottom，即水平方向自上而下
    writing-mode: horizontal-tb;
}

这样就完美了。:-)

附完整例子代码：

<