在HTML中,要實現區域內容的滾動,只需要設定好元素的寬度和高度,然後設置CSS屬性overflow 為auto或者scroll: 在Flex box佈局中,有時我們內容的寬度和高度是可變的,無法確定下來,這時候設置滾動條,可能會失效。只要記住幾個關鍵要素,就可以解決這個問題。 1、清楚的知道當前元 ...
在HTML中,要實現區域內容的滾動,只需要設定好元素的寬度和高度,然後設置CSS屬性overflow 為auto或者scroll:
在Flex box佈局中,有時我們內容的寬度和高度是可變的,無法確定下來,這時候設置滾動條,可能會失效。只要記住幾個關鍵要素,就可以解決這個問題。
1、清楚的知道當前元素的flex flow
如果要設置水平滾動條,那麼父元素的flex-flow要設置為row,如果要設置縱向滾動條,那麼父元素的flex-flow要設置為column。
2、flex設置為1
3、滾動方向的大小(寬度或者高度)設置為0,非滾動方向大小設置為100%或者一個你喜歡的寬度
這樣設置,基本就可以愉快的滾動了。
有時嵌套層數太多,可能也會失效,這時候記住另外一個關鍵點:
4、設置父元素的大小
如果父元素大小不清晰,也會出現滾動條失效的問題,所以需要把父元素的大小設置明白。如果父元素也是可變大小的,那麼要保證嵌套的flex-flow全部一直,然後寬度或者高度設置為0,這樣就可以正常滾動。像我的這個例子:
5、如何橫向和縱向全都跟隨flex滾動,這個比較麻煩,一個方向用上述方法,另外一個方向用calc函數來計算吧。
我的github上有個例子:https://github.com/vularsoft/studio-ui
裡面的html-demo.html文件是一個完全由flex box實現的佈局,感興趣的可以參考。