flex布局下组件撑开容器背景色不跟随
作者:互联网
flex布局下组件撑开容器背景色不跟随
效果图:
问题代码
容器是flex布局
.extend {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
只需要这样修改
父元素
.extend {
display: flex;
flex-wrap: wrap;
writing-mode: vertical-lr;
}
子元素
.good {
writing-mode: horizontal-tb;
}
vertical-rl
对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行左侧。对于右对齐(rtl)文本,内容从下到上垂直流动,下一垂直行位于上一行右侧。
vertical-lr
对于左对齐(ltr)文本,内容从上到下垂直流动,下一垂直行位于上一行右侧。对于右对齐(rtl)文本,内容从下到上垂直流动,下一垂直行位于上一行左侧。
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode
标签:flex,vertical,垂直,writing,背景色,撑开,wrap,对齐 来源: https://www.cnblogs.com/li33/p/16470732.html