由于直接使用flex-direction: column;会导致高度坍塌
所以这边使用writing-mode: vertical-lr;来实现垂直布局, 由于writing-mode的垂直布局会导致子元素内容改变行进方向，所以这边使用writing-mode: horizontal-tb;来实现将子元素摆正
以下是 demo：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .items {
display: inline-flex;
writing-mode: vertical-lr;
flex-wrap: wrap;
align-content: flex-start;
height: 350px;
background: blue;
}
.item {
writing-mode: horizontal-tb;
width: 150px;
height: 100px;
background: red;
margin: 2px;
}
|
1
2
3
4
5
6
7
8
9
| <div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
|
