我个人是非常喜欢使用flex布局的，它的确是方便的很！平时用的是行云流水，不要太顺畅。但是，flex的坑我也是碰到一个又一个了。这次，又是它！ 各位大神请往这看，
display: flex;
flex-direction: column;
flex-wrap: wrap;
多么简单的flex布局，多么常见的三行代码。信誓旦旦的提交代码，看着完美的页面，我不禁边笑边点头。坐等领导夸我（得意）。
产品来了，他带着我的BUG向我走来了。客户的页面乱了。我一顿操作，发现，这几行代码竟然失效了。我们的电脑都没问题，但是，我最尊敬的客户。。。那只能是我的问题了
我换了几个浏览器，发现除了chrome，我其他浏览器也出现了同样问题。是flex没错了。低版本chrome和其他浏览器，父元素的宽度不能被撑开。应该是flex宽度计算的问题。
那只能换掉flex了，通过grid布局平替。我为之前对grid的无知和轻视向它道歉。
display: grid;
grid-auto-flow: column;
grid-template-rows: auto;
好像下面这种也能解决
.parent {
display: flex;
flex-direction: row;
writing-mode: vertical-lr;
}
.child {
writing-mode: horizontal-tb;
}
这下完美了！
