好久不写前端代码了,有些生疏了。最近用Electron写了一个客户端程序,碰到了Flex布局添加滚动条的问题,耗费了不少时间,所以总结一下要点:
- 根据滚动条的方向,确定好父元素的
flex-flow
方向: 如果要设置水平滚动条,那么父元素的flex-flow
要设置为row
;如果要设置纵向滚动条,那么父元素的flex-flow
要设置为column
。 - 元素本身
flex
设置为1; - 滚动方向的大小(宽度或者高度)设置为0,非滚动方向大小设置为
100%
或者一个你喜欢的宽度; - 如果元素本身还有子元素,需要特别注意子元素的高度需要设置为
100%
。如果没有设置,则会导致子元素本身的高度不受限制,从而撑爆了元素本身。
特别需要注意的就是第4点:布局的时候经常使用到el-row/el-col
,其最后生成的html代码就会出现嵌套的div
组合,是一个典型的父子结构。这时就要注意在el-col
上设置相应的高度为100%
,否则就会出现撑爆了的结果。
下面是最终的代码,相关要点添加了注释: