使⽤flex布局竖直排列时，竖直换⾏后⼦元素未撑开⽗元素的问题解决使⽤ flex 布局竖直排列时，竖直换⾏后⼦元素未撑开⽗元素的问题解决
现有 html 结构如下:
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
html的flex布局<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<div class="item"></div>
</div>
wrap 为外层盒⼦，内有 ul 列表和⼀个 item 盒⼦
样式如下：
.wrap {
display: flex;
}
.item {
width: 50%;
}
ul {
height: 200px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid red;
}
ul li {
list-style: none;
width: 50px;
border: 1px solid #000;
}
ul 列表为 flex 布局，并且设置竖直排列和⾃动换⾏
结果如图，li ⼦元素并未撑开⽗元素，但是如果横向排布是正常的
解决⽅法
从，到的 css 解决⽅法：
ul {
flex-direction: row;
writing-mode: vertical-lr;
}
ul li {
writing-mode: horizontal-tb;
}
因为使⽤横向布局时可以正常撑开⽗元素，所以使⽤flex-direction: row；横向布局，再通过给⽗元素writing-mode: vertical-lr;，⼦元素writing-mode: horizontal-tb;，曲线实现竖向布局。
结果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。