0
点赞
收藏
分享

微信扫一扫

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

洲行 2022-03-25 阅读 51
css

原因

  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:内容垂直方向从下到上排列
举报

相关推荐

0 条评论