flex 布局竖直排列换行后让子元素撑开父元素

原因

1. 使用横向布局时可以正常撑开父元素，所以只能使用flex-direction: row;
2. 元素排列变成横向布局通过给父元素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：内容垂直方向从下到上排列