flex-wrap: wrap 溢出换行但是父盒子没有被撑开的解决办法_css flex-wrap wrap 溢出撑开

作者：凡人多烦事01 | 2024-03-14 13:17:06

踩

css flex-wrap wrap 溢出撑开

场景重现

当使用flex布局垂直排列并且到达父盒子高度就换行的时候, 会产生溢出的情况

解决办法


ul{
  writing-mode: vertical-lr;
    li{
      writing-mode: horizontal-tb;
    }
}
// 父盒子: writing-mode: vertical-lr; (垂直方向内内容从上到下，水平方向从左到右)
// 子元素: writing-mode: horizontal-tb; (水平方向自上而下的书写方式。即 left-right-top-bottom)

拓展: CSS writing-mode 属性

参考: 使用 flex 布局竖直排列时，竖直换行后子元素未撑开父元素的问题解决

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/234736

flex-wrap: wrap 溢出换行但是父盒子没有被撑开的解决办法_css flex-wrap wrap 溢出 撑开

场景重现

解决办法

flex-wrap: wrap 溢出换行但是父盒子没有被撑开的解决办法_css flex-wrap wrap 溢出撑开