MozTW 討論區
https://forum.moztw.org/

當 display:flex & writing-mode:vertical-rl 時版面發生崩壞
https://forum.moztw.org/viewtopic.php?f=2&t=47810
1 頁 (共 1 頁)

發表人:  Chimura [ 2017-12-31, 16:19 ]
文章主題 :  當 display:flex & writing-mode:vertical-rl 時版面發生崩壞

代碼:
<div style="writing-mode:vertical-rl">
   <div style="display:flex;border:0.125em solid #333333">box</div>
</div>

直書模式只要搭display:flex整個容器大小就會突破天際……

FF從50開始,一直到現在的57此問題仍未修正,我是不是該放棄使用flexbox :(

感覺這個問題因為反應的人不多,所以被永久擱置了 :cry:

發表人:  Amauds [ 2018-01-01, 17:01 ]
文章主題 :  Re: 當 display:flex & writing-mode:vertical-rl 時版面發生崩壞

div 原本的設定是佔用整個橫向空間,猜測因此跟 writing-mode:vertical-rl 起了衝突。
Flex container 不要指定 writing-mode,額外加一層來指定 Flex item 的 writing-mode。
代碼:
<div style="display:flex; border:1px solid #333333;">
 <div style="writing-mode:vertical-rl;">
  <div style="border:1px solid #333333;">Text 1</div>
  <div style="border:1px solid #333333;">Text 2</div>
  <div style="border:1px solid #333333;">Text 3</div>
  <div style="border:1px solid #333333;">長一點的文字</div>
 </div>
</div>

發表人:  Chimura [ 2018-01-01, 17:41 ]
文章主題 :  Re: 當 display:flex & writing-mode:vertical-rl 時版面發生崩壞

感謝Amauds,我把每一層容器都定義長度和寬度,也許能解決問題

1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/