原因
- 使用横向布局时可以正常撑开父元素,所以只能使用flex-direction: row;
- 元素排列变成横向布局通过给父元素writing-mode: vertical-lr;,子元素writing-mode: horizontal-tb;,曲线实现竖向布局。
代码示例
<div class="itemMain">
<div class="submenuItem" v-for="(itemC,indexC) in item.childItem" :key="indexC">
<div class="navTitle">
{{itemC.title}}
</div>
</div>
</div>
.itemMain{
display: flex;
flex-wrap: wrap;
height: 5.9rem;
flex-direction: row;
writing-mode: vertical-lr;
.submenuItem{
writing-mode: horizontal-tb;
}
}
样式解析
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
- horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom
- vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left
- vertical-lr:垂直方向内内容从上到下,水平方向从左到右
- sideways-rl:内容垂直方向从上到下排列
- sideways-lr:内容垂直方向从下到上排列