flex-wrap不能撑开容器

·  阅读 621
flex-wrap不能撑开容器

最近接了很多给JSP页面改样式的活,因为改了一次后,他们觉得改的好,就点名找了,我也不知道该高兴还是不高兴。。。

问题定位

产品的需求是这样的

我的第一反应就是

  • 容器A使用display: inline-flex;flex-direction: column;
  • 容器B使用 display: inline-flex; flex-flow: column wrap;

然后设置了容器A的最小宽度后,展示效果如下: 

容器B并未随着flex-wrap: wrap之后将容器撑开。

只有放弃该方法,寻找类似的方法。

解决方案

使用writing-mode属性。

在使用flex-direction: column的地方使用writing-mode: vertical-lr;

PS: 注意该属性会继承,需要注意其子元素内的writing-mode如果要正常显示,是否需要覆盖属性writing-mode: horizontal-tb

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改