CSS纵向布局

代码如下

.box{
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      writing-mode: vertical-lr;
      height: 55px;
      .item{
          display: flex;
          writing-mode: horizontal-tb;
          width: 160px;
      }
  }

关键样式

• writing-mode 属性指定块流动方向和行级内容的流动方向。
  • horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom；
  • vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left;
  • vertical-lr：垂直方向内内容从上到下，水平方向从左到右;
  • sideways-rl：内容垂直方向从上到下排列;
  • sideways-lr：内容垂直方向从下到上排列