使用 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>
    <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 子元素並未撐開父元素，但是如果橫向排布是正常的

解決方法

從stackoverflow，找到的 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;，曲線實現豎向布局。

結果如下：

附：stackoverflow上的回答示例https://jsfiddle.net/gcob492x/3/